我正在练习网格,现在我正在尝试网格模板区域,但与我下面的示例相比,我不清楚一件事:
HTML:
<div id="app">
<div class="grid-container">
<div class="grid-item1">Sono l'1</div>
<div class="grid-item2">Sono il 2</div>
<div class="grid-item3">Sono il 3</div>
<div class="grid-item4">Sono il 4</div>
<div class="grid-item5">Sono il 5</div>
<div class="grid-item6">Sono il 6</div>
</div>
</div>
CSS:
.grid-container {
display: grid;
grid-template-rows: 200px 200px 200px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 5px;
grid-template-areas:
'area1 area1 area1 area1 area1'
'area2 area2 . area3 area3'
'area2 area2 area4 area4 area4';
}
.grid-item1 {
background: blue;
text-align: center;
border: black 5px solid;
grid-area: area1;
}
.grid-item2 {
background: red;
text-align: center;
border: black 5px solid;
grid-area: area2;
}
.grid-item3 {
background: green;
text-align: center;
border: black 5px solid;
grid-area: area3;
}
.grid-item4 {
background: yellow;
text-align: center;
border: black 5px solid;
grid-area: area4;
}
我遵循的示例说“如果您不想分配一个单元格而是将其留空,只需插入一个句点。”,但是在我的练习中,如何在该空的中央单元格中插入 div 5 呢?我原以为 5 会在 6 之前跌破......
我还为那些想要更多理解的人创建了一个stackblitz: https://stackblitz.com/edit/js-tfljyr?file=style.css