How to get a column to span until the last grid line in an auto-flow grid? With an explicit grid, one can reference the -1 line, but it doesn’t seem to work with auto-flow. Here’s the code:
<div class="container">
<div class="side"></div>
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
<div>Row 4</div>
<div>Row 5</div>
</div>
.container {
display: grid;
/* auto-flow doesn't work. */
grid: auto-flow / 200px 50px;
/*
Explicit grid works.
grid: repeat(5, auto) / 200px 50px;
*/
}
.side {
/* Works in auto-flow if -1 is replaced with 6. */
grid-area: 1 / 2 / -1;
background-color: lightgrey;
}
If the grid is specified explicitly, everything works:
In an auto-flow grid, the column spans just a single row. (DevTools show that negative line numbers are assigned only to columns but not to rows, cf. the explicit grid image above.)