Intent to Prototype: CSS Subgrid

[Ethan Jimenez]

Contact emails

eth...@microsoft.com

Explainer

None

Specification

https://drafts.csswg.org/css-grid-2

Design docs
https://docs.google.com/document/d/1cpsCmzdDlXUKtMxOUKIoJFyLH54mLVhZnam_z0PriO0/edit?usp=sharing

Summary

Implements the CSS Grid Layout Module Level 2 specification, which introduces the concept of a "subgrid" to nested grid containers.

Blink component

Blink>CSS

Motivation

The problem CSS Subgrid solves is inheritance within nested grid containers: only direct children of a grid container are aware of its parent's grid properties, e.g., the size of its tracks, the names of each grid line. Whenever web authors work with a grid spanning some area within another grid, the children of the innermost grid are unaware of the outermost grid structure, which could potentially be a disadvantage if authors want those items to be aligned to other descendants of the outermost grid. A "subgrid" is a nested grid container whose row and column definitions are deferred to its parent; with such concept in mind, the problem above is mitigated by inheriting the grid properties and alignment from the spanned grid area in its parent grid.

Initial public proposal

Search tags

subgrid, css-grid-2, css

TAG review

TAG review status

Not applicable

Risks

Interoperability and Compatibility

This is a well-defined specification from the W3C, so we would be addressing some interoperability gaps instead of causing them.

Gecko: Shipped/Shipping

WebKit: Positive

Web developers: Strongly positive

Other signals:

Debuggability

Is this feature fully tested by web-platform-tests?

Yes

Flag name

Requires code in //chrome?

False

Tracking bug

https://crbug.com/618969

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5663795354533888

This intent message was generated by Chrome Platform Status.

[Mathias Bynens]

The required “Debuggability” section was left empty. Please follow https://goo.gle/devtools-checklist and elaborate on how developers would inspect & debug this new feature. Per the guide, we need to ensure DevTools supports basic editing of the new CSS properties and values — which would likely work out-of-the-box anyhow. Please elaborate.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/MN2PR00MB06691936F5BB8575F43A9704BC569%40MN2PR00MB0669.namprd00.prod.outlook.com.

[Philip Jägenstedt]

Hi Ethan,

It's great to see this Intent to Prototype. Subgrid tends to come up as important in web developer surveys, the latest being State of CSS 2021:

https://2021.stateofcss.com/en-US/opinions/#browser_interoperability_features

https://2021.stateofcss.com/en-US/opinions/#currently_missing_from_css_wins

It's a part of Interop 2022 for this reason

So I hope this all goes well :D

Best regards,

Philip

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADizRgahta5WoNwYezq1959cAVVAW39ky1cDg8yRsw8w_prKLw%40mail.gmail.com.

[Ethan Jimenez]

Hi everyone!

 

Philip, thanks for the encouragement, I’m super excited to deliver subgrid knowing that it’s going to make so many devs happy.

 

@Mathias Bynens quick question, should I re-send the intent to prototype or just edit it here?

 

Thanks in advance,

Ethan

[Mike Taylor]

(I'm not Mathias, but...)

You can just respond to this thread with the debug info, and update the Chromestatus entry as well - thanks!

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CH2PR00MB0661EB0E84DC3EECC65B99F3BC5A9%40CH2PR00MB0661.namprd00.prod.outlook.com.

[Ethan Jimenez]

Thanks for the response Mike!

 

I edited the “Debuggability” section below and will update the Chrome status entry soon.

 

Best regards,

Ethan

Debuggability

This feature is an extension of the capabilities of the CSS Grid Layout Module, no new properties will be introduced, but a new value “subgrid” will be introduced and properly rolled into the DevTools repository. Besides some work required to correctly compute the resolved value of subgrid definitions for “grid-template-columns” and “grid-template-rows”, no additional work is required to view/edit the style of a subgrid container.

Is this feature fully tested by web-platform-tests?

Yes

Flag name

 

Requires code in //chrome?

False

Tracking bug

https://crbug.com/618969

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5663795354533888

This intent message was generated by Chrome Platform Status.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/MN2PR00MB06691936F5BB8575F43A9704BC569%40MN2PR00MB0669.namprd00.prod.outlook.com.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADizRgahta5WoNwYezq1959cAVVAW39ky1cDg8yRsw8w_prKLw%40mail.gmail.com.

[Alex Russell]

I'm incredibly excited about this feature. Thanks for driving it in Chromium, Ethan.

Regarding the templates, it's also not clear to me that TAG review is optional in this case. At a minimum, you should be filing a request for review with a heavy suggestion that it should be treated as an FYI. It'll be upt to the TAG to decide how to dispose of that review, but we trust them to inform us of risks to platform coherence, so it'll be good to get their eyes on it regardless.

/cc Rossen

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/BY5PR00MB0659B2B498222A08158DDCDDBC5B9%40BY5PR00MB0659.namprd00.prod.outlook.com.

[Mathias Bynens]

Thank you for the update, Ethan! This clarifies a lot.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/BY5PR00MB0659B2B498222A08158DDCDDBC5B9%40BY5PR00MB0659.namprd00.prod.outlook.com.