正在尝试构建此 CSS 网格
Trying to build this CSS grid
我成功创建了网格,CSSdisplay:grid; 属性,像这样:
1 2
3 4
5 6
但我正在努力创建偏移量,如下所示:
有人吗?
代码如下:
.grid-container {
display: grid;
grid-template-columns: auto auto;
padding: 10px;
}
.grid-item:nth-child(2n) {
border: 2px dashed red;
margin-top: 10px;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
我成功创建了网格,CSSdisplay:grid; 属性,像这样:
1 2
3 4
5 6
但我正在努力创建偏移量,如下所示:
有人吗?
代码如下:
.grid-container {
display: grid;
grid-template-columns: auto auto;
padding: 10px;
}
.grid-item:nth-child(2n) {
border: 2px dashed red;
margin-top: 10px;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>