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

Question

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

<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 class="normal-child normal-child--5"></div>
    <div class="normal-child normal-child--5"></div>
    <div class="last-child"></div>
 </div>

我可以为元素的 row-start 分配一个任意大的数字，但这看起来不太优雅，并且有可能会遇到它中断的边缘情况，尽管很小。

我还尝试找出如何命名最后一行，但我无法找到一种方法来命名隐式网格中的行。

Answer 1

实际上有一个 grid-row: -1 或 grid-row-start: -1 就像有 grid-column: -1

只要您在显式网格范围内，它就可以很好地工作，但一旦到达隐式网格，它就会停止工作。原因是网格放置属性中的负数字索引从显式网格的边缘计数另请参阅此处https://css-tricks.com/difference-explicit-implicit-grids/

潜在的计划是至少让项目跨越到已标记为第 3 级讨论的最后一行/列，但这也不能解决您的问题。但现在，还没有办法用隐式网格来实现你所要求的。

可能有一些（丑陋的）解决方案，但至少需要已知数量的空初始行