Image link如何创建图像链接中给定的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>
我不想使用grid-area属性，因为我的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;
}<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>