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

对于FreeCodeCamp赋值,我在CSS Grid Layout中创建了一个iOS Calculator克隆.运行它的JavaScript适用于以后; 我现在专注于设计.

最终结果应如下所示:

xuOxL.jpg

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;

}

flight mode  

wifi signal at full strength

10:10 am
96% battery at near full charge
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的兼容性,但我对这两者仍然非常新.

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值