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

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>

我可以为元素的行起始分配一个任意大的数字，但这似乎不够优雅，并且有可能会遇到它中断的边缘情况，尽管很小。

我也试图弄清楚如何命名最后一行，但我无法找到一种方法来命名隐式网格中的行。

Answer 1

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

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

可能是一项计划，至少让元素跨越已标记为在第 3 级讨论的最后一行/列，但这也不能解决您的问题。但是现在，无法通过隐式网格实现您的要求。

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