- 首页
- 前端开发
- CSS 网格布局:如何使背景颜色跨越多个单元格?
CSS 网格布局:如何使背景颜色跨越多个单元格?
[英] CSS Grid Layout: how to make background colour span multiple cells?
本文介绍了CSS 网格布局:如何使背景颜色跨越多个单元格?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
对于 FreeCodeCamp 作业，我正在 CSS 网格布局中制作一个 iOS 计算器克隆.运行它的 JavaScript 供以后使用；我现在专注于设计.
最终结果应该是这样的:
html {字体大小:20px；}.包装{显示:网格；网格模板列:1.2fr 1fr 1.2fr；网格自动行:minmax(700px，自动)；}.wrapper>div {填充:0；}.nested-1 {显示:网格；网格模板列:重复(3，1fr)；justify-items:居中；}.nested-1>div {字体系列:Roboto"，无衬线；字体大小:0.6rem；白颜色;}.顶栏{填充顶部:0.3rem；}.飞行模式{证明自我:开始；填充左:0.3rem；}.charge-status {证明自我:结束；填充右:0.3rem；}.nested-2 {显示:网格；网格自动行:minmax(200px，自动)；justify-items: 结束；}.nested-2>div {字体系列:Roboto"，无衬线；字体大小:5rem；字体粗细:更轻；白颜色;填充左:0.2rem；填充右:0.2rem；对齐自我:结束；}.nested-3 {显示:网格；网格模板列:重复(4，1fr)；网格模板行:重复(5，1fr)；justify-items:居中；字体大小:2.2rem；颜色:黑色;背景:#ddd;字体系列:Roboto"，无衬线；字体粗细:更轻；填充:1rem；}.操作{字体大小:1.5rem；填充:1.3rem；}.bg-灰色{背景:#ccc;}.left-cell {背景:黑色；}.右单元格{背景:黑色；}.计算器{背景:#333333；}
<div class="wrapper"><div class="left-cell">
<div class="计算器"><div class="nested-1 top-bar"><div class="flight-modus"><img src="http://i63.tinypic.com/sebv9j.png" alt="飞行模式"> <img src="http://i67.tinypic.com/5zqf4k.png" alt="wifi 信号全强"></div><div>10:10 am</div><div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" alt="电池接近充满电"></div>
<div class="nested-2 结果"><div>3,658.8</div>
<div class="nested-3 keys"><div class="operations bg-grey">C</div><div class="operations bg-grey">+/-</div><div class="operations bg-grey">%</div><div class="operations bg-grey">/</div><div>5</div><div>5</div><div>5</div><div>5</div><div>5</div><div>5</div><div>5</div><div>5</div><div>5</div><div>5</div><div>5</div><div>5</div><div>5</div><div>5</div><div>5</div><div>5</div>
<div class="右单元格">
我做了什么:
我制作了一个带有多个嵌套网格的通用网格.这些嵌套网格中的第 3 个必须保存计算器键(数字 0-9、基本数学运算、结果，清晰).
如何在一定数量的 cells 上设置连续的 background-color，例如深灰色、橙色等?现在，在我的个人 divs 上设置 bg 会留下空白.接下来，根据示例，cell-borders 也应该获得 1px 纯色.
搜索了 SO 和 CSS Grid layout/CSS Flexbox 教程，我找不到这个明显简单的任务的简单解决方案.我应该在这里将 Flexbox 带入我的网格吗?
尽管我很欣赏 Grid 带来的美妙的新动态，以及它与 Flexbox 的兼容性，但我对两者仍然很陌生.
欢迎任何关于我的代码结构的提示和评论！谢谢，克里斯
解决方案
要修复nested-3的边框和背景，您可以使用以下方法设置背景和边框:
背景:#888；网格间隙:1px；
对于 nested-3 的所有 children，您可以设置背景:
.nested-3 >div {背景:#ddd;}
代替 .operations 上的 padding，您可以将其添加到 nested-3 >div:
.nested-3 >div {/* 添加 */背景:#ddd;显示:弹性；对齐内容:居中；对齐项目:居中；填充:1.3rem；}
并且您可能需要从 nested-3 div 中删除 justify-items: center 和 padding: 1rem.
我也尝试了这个设计 - 像这样重新排列标记:
<!-- 在这里修改--><div class="operations bg-grey">C</div><div class="operations bg-grey">+/-</div><div class="operations bg-grey">%</div><div>7</div><div>8</div><div>9</div><div>4</div><div>5</div><div>6</div><div>1</div><div>2</div><div>3</div><div class="zero">0</div><div>.</div><div class="operations bg-grey op-right">/</div><div class="op-right">x</div><div class="op-right">-</div><div class="op-right">+</div><div class="op-right">=</div>
并添加了这些样式:
.nested-3>.op-right {网格列开始:4；网格行开始:1；背景:#fd8a0d；}.nested-3>.op-right+.op-right {网格行开始:2；}.nested-3>.op-right+.op-right+.op-right {网格行开始:3；}.nested-3>.op-right+.op-right+.op-right+.op-right {网格行开始:4；}.nested-3>.op-right+.op-right+.op-right+.op-right+.op-right {网格行开始:5；}.零 {网格列:跨度 2；}
请看下面的片段:
html {字体大小:20px；}.包装{显示:网格；网格模板列:1.2fr 1fr 1.2fr；网格自动行:minmax(700px，自动)；}.wrapper>div {填充:0；}.nested-1 {显示:网格；网格模板列:重复(3，1fr)；justify-items:居中；}.nested-1>div {字体系列:Roboto"，无衬线；字体大小:0.6rem；白颜色;}.顶栏{填充顶部:0.3rem；}.飞行模式{证明自我:开始；填充左:0.3rem；}.charge-status {证明自我:结束；填充右:0.3rem；}.nested-2 {显示:网格；网格自动行:minmax(200px，自动)；justify-items: 结束；}.nested-2>div {字体系列:Roboto"，无衬线；字体大小:5rem；字体粗细:更轻；白颜色;填充左:0.2rem；填充右:0.2rem；对齐自我:结束；}.nested-3 {显示:网格；网格模板列:重复(4，1fr)；网格模板行:重复(5，1fr)；/*对齐项目:居中；*/字体大小:2.2rem；颜色:黑色;背景:#888;/* 已更改 */网格间隙:1px;/* 添加 */字体系列:Roboto"，无衬线；字体粗细:更轻；/*填充:1rem;*/}.nested-3>div {/* 添加 */背景:#ddd;显示:弹性；对齐内容:居中；对齐项目:居中；填充:1.3rem；}.操作{字体大小:1.5rem；/*填充:1.3rem;*/}.bg-灰色{背景:#ccc;}.left-cell {背景:黑色；}.右单元格{背景:黑色；}.计算器{背景:#333333；}/* 在下面添加了这些 */.nested-3>.op-right {网格列开始:4；网格行开始:1；背景:#fd8a0d；}.nested-3>.op-right+.op-right {网格行开始:2；}.nested-3>.op-right+.op-right+.op-right {网格行开始:3；}.nested-3>.op-right+.op-right+.op-right+.op-right {网格行开始:4；}.nested-3>.op-right+.op-right+.op-right+.op-right+.op-right {网格行开始:5；}.零 {网格列:跨度 2；}
<div class="wrapper"><div class="left-cell">
<div class="计算器"><div class="nested-1 top-bar"><div class="flight-modus"><img src="http://i63.tinypic.com/sebv9j.png" alt="飞行模式"> <img src="http://i67.tinypic.com/5zqf4k.png" alt="wifi 信号全强"></div><div>10:10 am</div><div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" alt="电池接近充满电"></div>
<div class="nested-2 结果"><div>3,658.8</div>
<div class="nested-3 keys"><!-- 在这里修改--><div class="operations bg-grey">C</div><div class="operations bg-grey">+/-</div><div class="operations bg-grey">%</div><div>7</div><div>8</div><div>9</div><div>4</div><div>5</div><div>6</div><div>1</div><div>2</div><div>3</div><div class="zero">0</div><div>.</div><div class="operations bg-grey op-right">/</div><div class="op-right">x</div><div class="op-right">-</div><div class="op-right">+</div><div class="op-right">=</div>
<div class="右单元格">
For a FreeCodeCamp assignment I am making an iOS Calculator clone in CSS Grid Layout. The JavaScript to run it is work for later; I'm now focusing on a the design.
The final result should look something like this:
html {
font-size: 20px;
}
.wrapper {
display: grid;
grid-template-columns: 1.2fr 1fr 1.2fr;
grid-auto-rows: minmax(700px, auto);
}
.wrapper>div {
padding: 0;
}
.nested-1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}
.nested-1>div {
font-family: "Roboto", sans-serif;
font-size: 0.6rem;
color: white;
}
.top-bar {
padding-top: 0.3rem;
}
.flight-modus {
justify-self: start;
padding-left: 0.3rem;
}
.charge-status {
justify-self: end;
padding-right: 0.3rem;
}
.nested-2 {
display: grid;
grid-auto-rows: minmax(200px, auto);
justify-items: end;
}
.nested-2>div {
font-family: "Roboto", sans-serif;
font-size: 5rem;
font-weight: lighter;
color: white;
padding-left: 0.2rem;
padding-right: 0.2rem;
align-self: end;
}
.nested-3 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
justify-items: center;
font-size: 2.2rem;
color: black;
background: #ddd;
font-family: "Roboto", sans-serif;
font-weight: lighter;
padding: 1rem;
}
.operations {
font-size: 1.5rem;
padding: 1.3rem;
}
.bg-grey {
background: #ccc;
}
.left-cell {
background: black;
}
.right-cell {
background: black;
}
.calculator {
background: #333333;
}
<body class="">
<div class="wrapper">
<div class="left-cell">
</div>
<div class="calculator">
<div class="nested-1 top-bar">
<div class="flight-modus"><img src="http://i63.tinypic.com/sebv9j.png" alt="flight mode">
<img src="http://i67.tinypic.com/5zqf4k.png" alt="wifi signal at full strength"></div>
<div>10:10 am</div>
<div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" alt="battery at near full charge"></div>
</div>
<div class="nested-2 result">
<div>3,658.8</div>
</div>
<div class="nested-3 keys">
<div class="operations bg-grey">C</div>
<div class="operations bg-grey">+/-</div>
<div class="operations bg-grey">%</div>
<div class="operations bg-grey">/</div>
<div>5</div>
<div>5</div>
<div>5</div>
<div>5</div>
<div>5</div>
<div>5</div>
<div>5</div>
<div>5</div>
<div>5</div>
<div>5</div>
<div>5</div>
<div>5</div>
<div>5</div>
<div>5</div>
<div>5</div>
<div>5</div>
</div>
</div>
<div class="right-cell">
</div>
</div>
What I did:
I have made a general grid with several nested grids.
No.3 of these nested grids has to hold the calculator keys (digits 0-9, basic math operations,
result, clear).
How do I set a continuous background-color across a certain number of cells e.g. darker grey, orange etc.?
Now, setting the bg on my individual divs is leaving gaps.
Next, the cell-borders should also get a 1px solid color, as per the example.
Having searched around on SO and in CSS Grid layout / CSS Flexbox tutorials,
I could not find a simple solution to this obviously simple task.
Should I bring Flexbox into my Grid here?
As much as I appreciate the wonderful new dynamics Grid brings, and its compatibility with Flexbox, I am still very much new to both.
Any tips and remarks on my code structure are welcome!
Thanks, Chris
解决方案
To fix the borders and background of nested-3, you could set the background and borders using:
background: #888;
grid-gap: 1px;
and for all the children of nested-3 you could set background:
.nested-3 > div {
background: #ddd;
}
Instead of padding on .operations you could add this to nested-3 > div:
.nested-3 > div {/* ADDED */
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
padding: 1.3rem;
}
and you might have to remove justify-items: center and padding: 1rem from the nested-3 div.
I tried out the design too - rearranged the markup like so:
<div class="nested-3 keys">
<!-- MODIFIED HERE -->
<div class="operations bg-grey">C</div>
<div class="operations bg-grey">+/-</div>
<div class="operations bg-grey">%</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div class="zero">0</div>
<div>.</div>
<div class="operations bg-grey op-right">/</div>
<div class="op-right">x</div>
<div class="op-right">-</div>
<div class="op-right">+</div>
<div class="op-right">=</div>
</div>
and added these styles:
.nested-3>.op-right {
grid-column-start: 4;
grid-row-start: 1;
background: #fd8a0d;
}
.nested-3>.op-right+.op-right {
grid-row-start: 2;
}
.nested-3>.op-right+.op-right+.op-right {
grid-row-start: 3;
}
.nested-3>.op-right+.op-right+.op-right+.op-right {
grid-row-start: 4;
}
.nested-3>.op-right+.op-right+.op-right+.op-right+.op-right {
grid-row-start: 5;
}
.zero {
grid-column: span 2;
}
See the snippet below:
html {
font-size: 20px;
}
.wrapper {
display: grid;
grid-template-columns: 1.2fr 1fr 1.2fr;
grid-auto-rows: minmax(700px, auto);
}
.wrapper>div {
padding: 0;
}
.nested-1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}
.nested-1>div {
font-family: "Roboto", sans-serif;
font-size: 0.6rem;
color: white;
}
.top-bar {
padding-top: 0.3rem;
}
.flight-modus {
justify-self: start;
padding-left: 0.3rem;
}
.charge-status {
justify-self: end;
padding-right: 0.3rem;
}
.nested-2 {
display: grid;
grid-auto-rows: minmax(200px, auto);
justify-items: end;
}
.nested-2>div {
font-family: "Roboto", sans-serif;
font-size: 5rem;
font-weight: lighter;
color: white;
padding-left: 0.2rem;
padding-right: 0.2rem;
align-self: end;
}
.nested-3 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
/*justify-items: center;*/
font-size: 2.2rem;
color: black;
background: #888;/* CHANGED */
grid-gap: 1px;/* ADDED */
font-family: "Roboto", sans-serif;
font-weight: lighter;
/*padding: 1rem;*/
}
.nested-3>div { /* ADDED */
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
padding: 1.3rem;
}
.operations {
font-size: 1.5rem;
/*padding: 1.3rem;*/
}
.bg-grey {
background: #ccc;
}
.left-cell {
background: black;
}
.right-cell {
background: black;
}
.calculator {
background: #333333;
}
/* ADDED THESE BELOW */
.nested-3>.op-right {
grid-column-start: 4;
grid-row-start: 1;
background: #fd8a0d;
}
.nested-3>.op-right+.op-right {
grid-row-start: 2;
}
.nested-3>.op-right+.op-right+.op-right {
grid-row-start: 3;
}
.nested-3>.op-right+.op-right+.op-right+.op-right {
grid-row-start: 4;
}
.nested-3>.op-right+.op-right+.op-right+.op-right+.op-right {
grid-row-start: 5;
}
.zero {
grid-column: span 2;
}
<body class="">
<div class="wrapper">
<div class="left-cell">
</div>
<div class="calculator">
<div class="nested-1 top-bar">
<div class="flight-modus"><img src="http://i63.tinypic.com/sebv9j.png" alt="flight mode">
<img src="http://i67.tinypic.com/5zqf4k.png" alt="wifi signal at full strength"></div>
<div>10:10 am</div>
<div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" alt="battery at near full charge"></div>
</div>
<div class="nested-2 result">
<div>3,658.8</div>
</div>
<div class="nested-3 keys">
<!-- MODIFIED HERE -->
<div class="operations bg-grey">C</div>
<div class="operations bg-grey">+/-</div>
<div class="operations bg-grey">%</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div class="zero">0</div>
<div>.</div>
<div class="operations bg-grey op-right">/</div>
<div class="op-right">x</div>
<div class="op-right">-</div>
<div class="op-right">+</div>
<div class="op-right">=</div>
</div>
</div>
<div class="right-cell">
</div>
</div>
这篇关于CSS 网格布局:如何使背景颜色跨越多个单元格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
