-
Notifications
You must be signed in to change notification settings - Fork 689
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
Comments
According to the current spec,
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! |
Thanks for contributing!
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).
👍 |
It seems like a reasonable expectation, but there's two problems with making
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. |
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 .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 |
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. |
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”.
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 |
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:
My response was: If the author defines grid items that can't help but overlap, they overlap. Same as for explicit placement. 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... 😉 |
If this syntax is not an option for the feature "span to last no matter whether auto-generated tracks are involved or not"
then perhaps there could be a new keyword:
In the possible syntax "span all", the "all" is true when eg
but the "all" is not completely true eg in
because the above cell doesn't span all the columns.
eg
Amelia wrote:
I agree (and perhaps it is the intent to overlap/underlap, which generally is |
This is somehow a duplicate of issue #388. Regarding the |
I'd be fine with that. In addition to
would this still be possible?
(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. |
Yes, it is. So can we close this in favor of the other one? Sebastian |
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. |
P.S. I now also linked your ticket in this ticket's desc. |
This got requested again: #2594 |
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. |
Would it make sense to add this to the agenda? |
(just adding myself to the discussion) |
( @FremyCompany Welcome! By the way, generally, I think that under "Notifications" you can click "Subscribe".) |
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 |
Will this feature be available? |
@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 :) |
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? |
I've been seeing the keywords |
@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. |
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.. |
I hope there will be a simple solution that doesn't require subgrids. |
If it makes I difference, I believe that this is an important feature. I am hoping this gets considered soon! |
Is there work going on towards a solution? |
In a current project, I need a cell to span all columns, including all implicit columns.
This currently doesn't work:
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
The text was updated successfully, but these errors were encountered: