[css-grid] Feature: span to last track no matter whether auto-generated (implicit) tracks are involved or not

[tobireif]

In a current project, I need a cell to span all columns, including all implicit columns.

This currently doesn't work:

grid-column: 1 / -1;

I would expect the above line to cause the cell to span all columns, no matter whether they're all explicit, all implicit, or mixed.

I hope this can be ensured in the spec and in browsers.

P.S.

Thanks for CSS Grid! Overall it's a joy to use.

Added later:

Also see this earlier ticket: #388

[SelenIT]

According to the current spec,

Numeric indexes in the grid-placement properties count from the edges of the explicit grid. Positive indexes count from the start side (starting from 1 for the start-most explicit line), while negative indexes count from the end side (starting from -1 for the end-most explicit line).

So that line isn't supposed to count implicit lines. Hovewer, I agree that the ability to span all the lines (including the implicit ones) would be very useful!

[tobireif]

Thanks for contributing!

So that line isn't supposed to count implicit lines.

Hence my wish 😀

I had a situation in a project where there were only implicit tracks, and needed one cell to span all columns. Would be nice to be able to say "-1" instead of hardcoding the column-number (also, the implicit column count was changing often during design/development).

Hovewer, I agree that the ability to span all the lines (including the implicit ones) would be very useful!

👍

[fantasai]

It seems like a reasonable expectation, but there's two problems with making grid: 1/-1 work like this:

• Due to auto-placement, we don't know where the last line is until everything is placed; and placing something relative to the last auto-generated line impacts where the auto-placed things can be placed, which impacts how many lines we need, which changes which line would be the last line...
• It's possible for auto-generated lines to be added before the first line; we can't really shift line number 1 in response to the implicit lines before the start, so it would be inconsistent to shift line number -1 in response to lines added after the end.

I would like to solve the use case, but given the way placement works currently, a) I don't know how to actually do it and b) it would definitely need a different syntax than negative indexes.

[AmeliaBR]

This issue came up in a Twitter discussion (including the explanation of why negative index values cannot practically include auto-generated lines, which @fantasai just posted here).

But myself and others in that discussion agree with Tobi that "fill this row/column", either completely or starting from a specified point, is a desirable behavior.

So the next suggestion is to add keyword values for those specific, simpler cases. Extend the syntax of the grid-row/column-start/end properties to have a span all option. So you could do things like

.header {
  grid-row: 1;
  grid-column: 1 / span all;
}
.sidebar {
  grid-column: -1;
  grid-row: 2 / span all;
}
.gallery-item {
  /* auto placed in auto-generated rows and columns that fill up remaining space */
}

Would that avoid the layout complications? Every time an auto-generated track is added to the layout, it would be straightforward to determine (I think) whether each cell was occupied by a span all item, or not.

[rachelandrew]

This is one of the top things I am being asked about, or am seeing people confused about. From an author point of view the current behaviour seems unexpected because they don't tend to consider the difference between the explicit/implicit grid.

Assuming the issue of figuring out what the last line actually is can be solved, a keyword syntax to span all, or span to the end line might be useful.

[kizu]

Another rough idea of syntax/implementation (also copy-and-pasted from the thread):

Some kind of a function wrapper that would tell “this row/column can contain only one item that would take it entirely”.

grid-template-columns: 1fr span-all(1fr) 1fr, or something like that?

As for the solving the last line for any added items: any items that would want to be placed in this column having no explicit raw would be placed into it overlapping anything that was present there.

For cases when there are multiple items defined alongside this, for example:

.grid {
  grid-template:
    "a    b              c"
    "a    d              c" /
     1fr  span-all(1fr)  1fr;
}

Only the last item/area on the edge of explicit grid should be continued to the end I think, so the b item would span to 1 element, and d would be the one spanned to the end.

[AmeliaBR]

One other issue @fantasai brought up on Twitter: What if span-all elements create a situation where there is no available cells for auto-placed items?

Examples:

• A grid item with an explicit column number, auto row position, but that entire column is covered by a span all.
• Completely auto-placed grid items, but in a grid with a fixed number of columns and auto-generated rows, where there is a span all item in every column.

My response was:

If the author defines grid items that can't help but overlap, they overlap. Same as for explicit placement.
There would need to be an explicit check: If no amount of adding auto-generated tracks will ever create room, don't add any tracks.

But of course, it's not that simple. You'd still need to adjust the placement algorithm to define exactly where the overlap occurs: whether it changes for sparse vs dense packing, and how you adjust when you have a mix of fixed-span and span-all elements in the way.

So, if anyone wants to come up with a draft algorithm that could do that, it would probably be an important first step in moving forward... 😉

[tobireif]

If this syntax is not an option for the feature "span to last no matter whether auto-generated tracks are involved or not"

grid-column: 1 / -1;

then perhaps there could be a new keyword:

grid-column: 1 / span to-last;

In the possible syntax "span all", the "all" is true when eg

grid-column: 1 / span all;

but the "all" is not completely true eg in

grid-column: 2 / span all;

because the above cell doesn't span all the columns.
This would be better:
eg

grid-column: 1 / span to-last;

eg

grid-column: 2 / span to-last;

Amelia wrote:

If the author defines grid items that can't help but overlap, they overlap.

I agree (and perhaps it is the intent to overlap/underlap, which generally is
a possibility, see for example https://tobireif.com/demos/grid/ → "Layout 3"
which has a huge underlapping cell).

[mrego]

This is somehow a duplicate of issue #388.

Regarding the 1 / span last idea, note that there can be implicit tracks before the explicit grid.
So you might probably want something like span first / span last (if that makes any sense), to cover the use case of having an element that spans all the tracks.

[tobireif]

So you might probably want something like span first / span last (if that makes any sense), to cover the use case of having an element that spans all the tracks.

I'd be fine with that.

In addition to

grid-column: first / span last;

would this still be possible?

grid-column: 2 / span last;

(where "2" stands for a positive number that's higher that 1.)

Spanning all tracks is one use case (first→last), but saying "start at n and span to last" is an additional use case.