如何将网格单元格放置在每个白色单元格都为空的棋盘形式中

图片链接如何创建图片链接中给出的css网格布局。我想在空白区域添加空格，在蓝色区域添加单元格div元素。

这就是我能够取得的成就。

<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>

我不想使用网格区域属性，因为我的html内容是动态的。

您可以传递display: grid以在css中创建网格结构。你可以在这里阅读更多CSS_Grid_Layout

.container {
display:grid;
grid-template-columns: 150px 150px;
grid-row: auto auto;
}
.cell {
border: 2px solid #000;
width: 150px;
height: 100px;
}
.container div:nth-child(2),
.container div:nth-child(3),
.container div:nth-child(6),
.container div:nth-child(7){
background-color: blue
}

<div class="container">
<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>

相关内容

最新更新

热门标签：