Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
tobireif opened this issue Mar 6, 2018 · 28 comments
Labels
css-grid-3 Masonry Layout

Comments

@tobireif
Copy link

tobireif commented Mar 6, 2018

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

@tobireif tobireif changed the title [css-grid] [css-grid] "grid-column: 1 / -1" should span all columns Mar 6, 2018
@SelenIT
Copy link
Collaborator

SelenIT commented Mar 6, 2018

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
Copy link
Author

tobireif commented Mar 6, 2018

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
Copy link
Collaborator

fantasai commented Mar 21, 2018

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.

@fantasai fantasai added css-grid-3 Masonry Layout and removed css-grid-1 labels Mar 21, 2018
@AmeliaBR
Copy link
Contributor

AmeliaBR commented Mar 21, 2018

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
Copy link
Contributor

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
Copy link
Member

kizu commented Mar 21, 2018

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
Copy link
Contributor

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
Copy link
Author

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

@tobireif tobireif changed the title [css-grid] "grid-column: 1 / -1" should span all columns [css-grid] Feature: span to last track no matter whether auto-generated tracks are involved or not Mar 22, 2018
@mrego
Copy link
Member

mrego commented Mar 22, 2018

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
Copy link
Author

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
Copy link
Contributor

This is somehow a duplicate of issue #388.

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

Sebastian

@tobireif
Copy link
Author

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
Copy link
Author

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

@tobireif
Copy link
Author

This got requested again: #2594

@tabatkins
Copy link
Member

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
Copy link
Author

tobireif commented Jun 1, 2018

Would it make sense to add this to the agenda?

@FremyCompany
Copy link
Contributor

(just adding myself to the discussion)

@tobireif
Copy link
Author

tobireif commented Jun 4, 2018

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

@SebastianZ
Copy link
Contributor

Note that in #388 (comment) I've linked a simple, incomplete example for how this could work.

Also note the detailed feedback @MatsPalmgren gave in #388 (comment) on his experimental implementation in Gecko.

Sebastian

@tobireif
Copy link
Author

tobireif commented Nov 5, 2018

Will this feature be available?

@rachelandrew
Copy link
Contributor

@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 :)

@MatsPalmgren MatsPalmgren changed the title [css-grid] Feature: span to last track no matter whether auto-generated tracks are involved or not [css-grid] Feature: span to last track no matter whether auto-generated (implicit) tracks are involved or not Jan 10, 2020
@IcyFoxe
Copy link

IcyFoxe commented Jan 2, 2021

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
Copy link

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
Copy link
Collaborator

fantasai commented Jan 8, 2021

@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 #2402 (comment) 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
Copy link

IcyFoxe commented Jan 9, 2021

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
Copy link
Author

tobireif commented Jul 1, 2021

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

@nachtfunke
Copy link

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

@tobireif
Copy link
Author

Is there work going on towards a solution?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-grid-3 Masonry Layout
Projects
None yet
Development

No branches or pull requests