我正在尝试为我的网格 block 中的行创建模板:
grid-template-rows: repeat(3, 150px);
我知道,这个模板应该适用于前 3 行。
然而,from 4 row 这个模板是行不通的。
我可以为所有行制作模板吗?
附言 此模板仅适用于第一行。
grid-template-rows: 150px;
最佳答案
使用 grid-auto-rows
(自动生成的行)而不是 grid-template-rows
(手动生成的行)。在当前情况下,grid-auto-rows: 150px
可以解决问题。演示:
.grid {
display: grid;
grid-auto-rows: 150px;
/* space between columns for demo */
grid-gap: 10px;
}
/* just styles for demo */
.grid__item {
background-color: tomato;
color: white;
}
<div class="grid">
<div class="grid__item">One</div>
<div class="grid__item">Two</div>
<div class="grid__item">Three</div>
<div class="grid__item">Four</div>
<div class="grid__item">Five</div>
<div class="grid__item">Six</div>
<div class="grid__item">Seven</div>
<div class="grid__item">Eight</div>
<div class="grid__item">Nine</div>
</div>
关于css - 如何为所有行重复网格模板行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45412520/