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

实际上有一个网格行：-1或网格行开始：-1，就像有一个网格列：-1

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

可能是一个计划，至少让项目跨到在第3层中标记为讨论的最后一行/列，但这也没有解决您的问题。但是目前，还没有办法通过隐式网格实现您的要求。

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

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

1 个答案: