CSS网格布局:如何使背景颜色跨越多个单元格？
Juc*_*ris 6 html css css3 flexbox css-grid
对于FreeCodeCamp赋值,我在CSS Grid Layout中创建了一个iOS Calculator克隆.运行它的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例如深灰色,橙色等？现在,设置bg我的个人divs是留下空白.接下来,cell-borders根据示例,还应获得1px纯色.
在SO和CSS Grid布局/ CSS Flexbox教程中搜索过,我找不到这个显而易见的简单任务的简单解决方案.我应该在这里将Flexbox带入我的网格吗？
尽管我很欣赏Grid带来的精彩新动力,以及它与Flexbox的兼容性,但我对这两者仍然非常新.
欢迎任何关于我的代码结构的提示和评论!谢谢,克里斯
要修复 的边框和背景
nested-3，您可以使用以下命令设置背景和边框：
Run Code Online (Sandbox Code Playgroud)background: #888; grid-gap: 1px;并为你们所有的孩子设置
nested-3背景：
Run Code Online (Sandbox Code Playgroud).nested-3 > div { background: #ddd; }您可以将其添加
padding到：.operationsnested-3 > div
Run Code Online (Sandbox Code Playgroud).nested-3 > div {/* ADDED */ background: #ddd; display: flex; justify-content: center; align-items: center; padding: 1.3rem; }你可能需要从div 中删除
justify-items: centerand 。padding: 1remnested-3
我也尝试了这个设计 - 重新排列标记，如下所示：
<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>
并添加了这些样式：
.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;
}
请参阅下面的片段：
background: #888;
grid-gap: 1px;
.nested-3 > div {
background: #ddd;
}