我有一个动态生成的网格,由于某种原因,它在未知数量的初始行中没有元素。网格容器的所有子级(最后一个除外)都被赋予了它们所属的行。有没有办法保证最后一个元素放在最后一行?有grid-row-start相当于 的grid-column-start: -1吗?
为了扩展这个问题,默认情况下,最后一个元素可能在开头是单独的:
.container {
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 60px;
}
.normal-child {
background-color: blue;
}
.normal-child:nth-child(2n) {
background-color: red;
}
.normal-child--3 {
grid-row: 3 / span 1;
}
.normal-child--4 {
grid-row: 4 / span 1;
}
.normal-child--5 {
grid-row: 5 / span 1;
}
.last-child {
background-color: green;
} Run Code Online (Sandbox Code Playgroud)
<div class="container">
<div class="normal-child normal-child--3"></div>
<div class="normal-child normal-child--3"></div>
<div class="normal-child normal-child--3"></div>
<div class="normal-child normal-child--4"></div>
<div class="normal-child normal-child--4"></div>
<div class="normal-child normal-child--4"></div>
<div class="normal-child normal-child--5"></div>
<div …Run Code Online (Sandbox Code Playgroud)