Html 如何在每个白色单元格都为空的情况下将网格单元格放置在检查板形式中
如何创建css网格布局，如图片链接所示。 我想在空白区域添加空格，在蓝色区域添加cell div元素 这就是我能够取得的成就Html 如何在每个白色单元格都为空的情况下将网格单元格放置在检查板形式中,html,css,css-grid,Html,Css,Css Grid,如何创建css网格布局，如图片链接所示。 我想在空白区域添加空格，在蓝色区域添加cell div元素 这就是我能够取得的成就 <html> <head> <style> .grid-contaienr { display: grid; grid-template-columns: 120px 100px; grid-auto-rows: ; } .cell { backg
<html>
<head>
<style>
.grid-contaienr {
display: grid;
grid-template-columns: 120px 100px;
grid-auto-rows: ;
}
.cell {
background-color: aqua;
box-shadow: 0px 0px 1px 0px rgb(71, 71, 71) inset;
}
.cell:nth-child(3n) {
grid-column: 2;
}
.cell:nth-child(3n+1) {
grid-column: 2;
}
.cell:nth-child(3n) {
grid-column: auto/span 2;
}
</style>
</head>
<body>
<div class="grid-contaienr">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
<div class="cell">11</div>
<div class="cell">12</div>
<div class="cell">13</div>
<div class="cell">14</div>
<div class="cell">15</div>
<div class="cell">16</div>
<div class="cell">17</div>
</div>
</body>
</html>
.grid contaienr{
显示：网格；
网格模板列：120px 100px；
网格自动行：；
}
.细胞{
背景色：浅绿色；
盒影：0px 0px 1px 0px rgb（71,71,71）插图；
}
.单元：第n个子单元（3n）{
网格柱：2；
}
.单元：第n个子单元（3n+1）{
网格柱：2；
}
.单元：第n个子单元（3n）{
格线柱：自动/跨度2；
}
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
我不想使用网格区域属性，因为我的html内容是动态的。您可以通过
display:grid.container{
显示：网格；
网格模板列：150px 150px；
网格行：自动；
}
.细胞{
边框：2倍实心#000；
宽度：150px；
高度：100px；
}
.货柜部：第n个子女（2），
.货柜部：第n个子女（3），
.货柜部：第n名儿童（6），
.货柜部：第n名儿童（7）{
背景颜色：蓝色
}
1.
2.
3.
4.
5.
6.
7.
8.