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

tobireif commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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.

SebastianZ commented 6 years ago

This is somehow a duplicate of issue #388.

Yes, it is. So can we close this in favor of the other one?

Sebastian

tobireif commented 6 years ago

Recent discussion is taking place here, and (more importantly) there are different ideas/suggestions/wishes on each, so I think we should leave both tickets open. They're cross-linked, so that should be OK.

Then when everything in each of the two related tickets has been resolved (eg specd and implemented), both tickets can get closed.

tobireif commented 6 years ago

P.S. I now also linked your ticket in this ticket's desc.

tobireif commented 6 years ago

This got requested again: https://github.com/w3c/csswg-drafts/issues/2594

tabatkins commented 6 years ago

And as I just mentioned in #2530, this would happen to be one way to let us use Grid on W3C specs without massively altering the markup. We'd just flow the entire spec into a single-column grid by default, with each of the top-level things creating implicit rows, and when the spec was in "sidebar mode" we'd instead switch it to 2-column, and put the ToC in the first column, having it span all the implicit rows.

tobireif commented 6 years ago

Would it make sense to add this to the agenda?

FremyCompany commented 6 years ago

(just adding myself to the discussion)

tobireif commented 6 years ago

( @FremyCompany Welcome! By the way, generally, I think that under "Notifications" you can click "Subscribe".)

SebastianZ commented 6 years ago

Note that in https://github.com/w3c/csswg-drafts/issues/388#issuecomment-402893343 I've linked a simple, incomplete example for how this could work.

Also note the detailed feedback @MatsPalmgren gave in https://github.com/w3c/csswg-drafts/issues/388#issuecomment-304476365 on his experimental implementation in Gecko.

Sebastian

tobireif commented 5 years ago

Will this feature be available?

rachelandrew commented 5 years ago

@tobireif possibly, however discussion here doesn't infer a timeframe. The recent work on grid has been to enable the subgrid feature for level 2, this issue has been tagged for level 3 so I would expect it to be discussed along with other features for L3. When it is discussed in a meeting the IRC log will be posted to the issue. I've no doubt it will be discussed - the editors of the spec have been commenting above :)

IcyFoxe commented 3 years ago

I've been trying to give CSS Grid another try and this was the first feature I was looking for.

So there's still no way for a column to span to the last row of implicitly set rows? Because then it kind of defeats the purpose of CSS Grid in many cases.

davidbernegger commented 3 years ago

I've been seeing the keywords first and last which I'd change to start and end to keep in line with our logical properties and values specification.

fantasai commented 3 years ago

@IcyFoxe Still none, sorry. I suspect however that many of the use cases for this can be solved with subgrid, though, e.g. by wrapping the auto-placed items in their own subgrid and having that take up only one row in the master grid. The example in https://github.com/w3c/csswg-drafts/issues/2402#issuecomment-375078099 can be done that way, for example, and in many cases would be better to do that way because the ideal markup would include such a wrapper element around the gallery items anyway.

IcyFoxe commented 3 years ago

I guess that's an only option we have @fantasai , but I would argue whether it's really a better solution. What's stopping me then from using flexbox and sub-flexboxes? I will be able to achieve any look CSS grid can make.

I thought the biggest selling point of CSS grid was to keep the whole layout in one grid container..

tobireif commented 3 years ago

I hope there will be a simple solution that doesn't require subgrids.

nachtfunke commented 3 years ago

If it makes I difference, I believe that this is an important feature. I am hoping this gets considered soon!

tobireif commented 1 year ago

Is there work going on towards a solution?

w3c / csswg-drafts

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