Can an element be forced to the last row of an implicit grid?

Question

I have a dynamically generated grid that, for reasons, does not have elements in an unknown number of initial rows. All of the grid container's children but the last are given what row they belong to. Is there a way to ensure that the last element is placed in the last row? Is there a grid-row-start equivalent to grid-column-start: -1?

To expand on the question, by default, the last element will probably be alone at the beginning:

.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>

I can assign an arbitrarily large number to the element's row-start, but that seems inelegant and there is a chance, though small, that the edge case where it breaks will be encountered.

I also have tried to figure out how to name the last row, but I wasn't able to find a way to name rows in an implicit grid.

No, I do not believe this is possible.... there is no `row: -1` since that's essentially what you are after. — Paulie_D, Oct 18 '18 at 14:25
Semi-related - https://stackoverflow.com/questions/46308048/how-to-target-a-specific-column-or-row-in-css-grid-layout — Paulie_D, Oct 18 '18 at 14:28

score 4 · Answer 1 · answered Nov 29 '18 at 12:16

There is actually a grid-row: -1 or grid-row-start: -1 just like there is grid-column: -1

It works pretty well as long as your within the range of your explicit grid, but stops working as soon as you get to the implicit grid. The reason is that negative numeric indexes in the grid-placement properties count from the edges of the explicit grid See also here https://css-tricks.com/difference-explicit-implicit-grids/

The potentially is a plan to at least let items span to last row/column that has been tagged for discussion in level 3, but that doesn't rally address your case either. But right now, there is no way to achieve what you ask with implicit grid.

There might be some (ugly) solutions but that would at least require a known amount of empty initial rows

Can an element be forced to the last row of an implicit grid?

1 Answers1