小编was*_*ona的帖子

可以将元素强制到隐式网格的最后一行吗?

我有一个动态生成的网格,由于某种原因,它在未知数量的初始行中没有元素。网格容器的所有子级(最后一个除外)都被赋予了它们所属的行。有没有办法保证最后一个元素放在最后一行?有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)

html css css-grid

5
推荐指数
1
解决办法
2023
查看次数

标签 统计

css ×1

css-grid ×1

html ×1