极客观点
项目管理
HarmonyOS
对于 FreeCodeCamp 作业，我正在 CSS 网格布局中制作一个 iOS 计算器克隆。运行它的 JavaScript 供以后使用；我现在专注于设计。
最终结果应如下所示：
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>
我做了什么：
我制作了一个包含多个嵌套网格的通用网格。这些嵌套网格中的第 3 个必须容纳计算器键（数字 0-9、基本数学运算、结果、清除）。
我如何设置一个连续的 background-color 跨越一定数量的 cells 例如深灰色，橙色等？现在，在我的个人 divs bg 留下了空白。接下来， cell-borders 也应该按照示例获得 1px 纯色。
在 SO 和 CSS Grid layout / CSS Flexbox 教程中四处搜索之后，我找不到一个简单的解决方案来解决这个明显简单的任务。我应该在这里将 Flexbox 引入我的网格吗？
尽管我很欣赏 Grid 带来的美妙的新动态，以及它与 Flexbox 的兼容性，但我对这两者还是很陌生。
欢迎对我的代码结构提出任何提示和评论！谢谢，克里斯
原文由 Juchtmans Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议
nested-3的边框和背景，您可以使用以下方法设置背景和边框：对于
nested-3的所有 _孩子_，您可以设置背景：padding在.operations你可以将它添加到nested-3 > div：并且您可能必须从
nested-3div 中删除justify-items: center和padding: 1rem。我也尝试了这个设计——像这样重新排列标记：
并添加了这些样式：
请参阅下面的代码段：