[css-grid-2] conditional subgrid fallback when no parent grid is available

[mor10]

Reference: https://drafts.csswg.org/css-grid-2/#subgrids

Issue:

When subgrid is used on a container whose parent does not have a grid declared, there is no way to provide alternate grid lines as a fallback. Using the cascade as in the example below does not work because even without the parent grid, the subgrid declaration is still valid.

.subgrid {
  grid-template-columns: repeat(4, 1fr); /* fallback does not work*/
  grid-template-columns: subgrid;
}

Expected behavior

Provide grid line fallbacks for subgrid when a parent grid is not present.
Example:

grid-template-columns: subgrid, repeat(4, 1fr);

Scenario

A component uses the parent grid if it is present through conditional subgrid. If the parent has a grid, the subgrid applies, otherwise the component uses its own grid lines.

Sandbox

I've built a rudimentary example to demonstrate the above scenario:
https://codepen.io/mor10/pen/ZEyVpZb

[Loirooriol]

You could try

grid-template-columns: subgrid;
grid-auto-columns: 1fr;
grid-template-areas: '. . . .';

But being able to specify a template fallback doesn't sound unreasonable.

[tabatkins]

Thinking over this with @fantasai, it looks like the grammar is already well set-up to handle this: it currently allows subgrid <line-name-list>, and we could just allow it to take a full track list instead, with the sizes ignored if it successfully subgrids. That way, your example could be written:

grid-template-columns: subgrid repeat(4, 1fr);

This seems reasonable, but we'd like to push it to level 3, as it's a new feature and subgrid is currently reasonably stabilized in implementations.

[Loirooriol]

Need to be careful with auto repetitions:

grid-template-columns: subgrid [a] repeat(auto-fill, [b] 1fr [c]) [d];

If it's not a successful subgrid, assuming 2 repetitions, this would be like:

grid-template-columns: [a b] 1fr [c b] 1fr [c d];

If it's a successful subgrid, again with 2 repetitions, if we just ignore the size and treat the repeat as a <name-repeat>,

grid-template-columns: subgrid [a] [b] [c] [b] [c] [d];

That's quite different.

Also, what happens with auto-fit, does it become auto-fill if it's a subgrid?

It may be better to specify the fallback independently:

subgrid <line-name-list>? [, [<track-list> | <auto-track-list>] ]?

[mor10]

Personally I prefer to have an explicitly declared fallback similar to how custom properties have fallbacks: everything after the comma is the fallback value. This is syntactically clear and prevents any processing confusion. Either A or B, not both.

[tabatkins]

Need to be careful with auto repetitions:

Right, we'd want to only allow subgrid <track-list>, not subgrid <auto-track-list>.

Personally I prefer to have an explicitly declared fallback similar to how custom properties have fallbacks: everything after the comma is the fallback value. This is syntactically clear and prevents any processing confusion. Either A or B, not both.

We'd like to avoid that for a few reasons.

One, we want to leave open the possibility of allowing an element to host multiple grids, as this has been a request in the past, and a comma-separated value is the most straightforward grammar for such if we do that.

Second, we do already allow specifying track lists limited solely to names, and just allowing a full track list seems a straightforward extension of that.

Third, doing it this way removes the possibility of a grid having different track setups entirely based on it being subgridded or not, which seems like a good thing that will reduce confusion. Similarly it means you don't have to repeat line names for the two situations, with the possibility of them going out of sync.

[css-meeting-bot]

The CSS Working Group just discussed [css-grid-2] conditional subgrid fallback when no parent grid is available, and agreed to the following:

• RESOLVED: Add this functionality to grid L3

The full IRC log of that discussion

<dael> Topic: [css-grid-2] conditional subgrid fallback when no parent grid is available
<dael> github: https://github.com//issues/6692
<dael> Rossen_: Opened by Morton. TabAtkins can you take?
<dael> TabAtkins: Morton is asking for...right now the rule is if you say a grid is subgrid in 1 axis and it doesn't have a parent it reverts to being an ordinary grid with no declaration on that axis
<dael> TabAtkins: Can rely a bit on grid template areas but it's hacky. We consider this to be an error case. if you say it's a subgrid and not inside a grid you messed up
<dael> TabAtkins: However, if you're writing an independent component reasonable to allow for that. If subgrid works in the parent and if not has own tracks
<dael> TabAtkins: Upon review fantasai and I decided grammar handles this. You can already spec the names without sizes. If we allow a full track list seems reasonable for grammar and we ignore sizes if you're subgrid
<dael> TabAtkins: Small wrinkle from oriol is make sure not to put auto-repetition is. We have a grammar term that does that and allows non-auto-repeat
<dael> TabAtkins: We wouldn't put in grid 2, but reasonable for grid 3 with other new features. Thoughts? Objections? Okay to explore in grid 3?
<miriam> +1 I would use this
<dlibby> +1 for grid 3
<dael> Rossen_: Following your explanation it seems reasonable. Curios about other opinions. See IRC support
<dael> Rossen_: Sounds like something we can add to L3 of grid. Obj?
<dael> RESOLVED: Add this functionality to grid L3
<dael> Rossen_: Means you need to make Grid 3 TabAtkins
<dael> fantasai: It's on he to do list
<dael> TabAtkins: Long list of features we've deferred
<dael> fantasai: Wrapping up L1 & 2 first