html表格网格颜色,CSS网格布局:如何使背景颜色跨越多个单元格？

对于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;

}

 

10:10 am

96%

3,658.8

C

+/-

%

/

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

我做了什么:

我已经制作了一个带有几个嵌套网格的通用网格.这些嵌套网格中的第3个必须保存计算器键(数字0-9,基本数学运算,结果,清除).

如何设置background-color一定数量的连续,cells例如深灰色,橙色等？现在,设置bg我的个人divs是留下空白.接下来,cell-borders根据示例,还应获得1px纯色.

在SO和CSS Grid布局/ CSS Flexbox教程中搜索过,我找不到这个显而易见的简单任务的简单解决方案.我应该在这里将Flexbox带入我的网格吗？

尽管我很欣赏Grid带来的精彩新动力,以及它与Flexbox的兼容性,但我对这两者仍然非常新.

欢迎任何关于我的代码结构的提示和评论!谢谢,克里斯