Intent to Prototype: CSS Subgrid

1150 views
Skip to first unread message

Ethan Jimenez

unread,
Jan 18, 2022, 12:42:32 PMJan 18
to blin...@chromium.org

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

subgridcss-grid-2css

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

unread,
Jan 19, 2022, 2:09:29 AMJan 19
to Ethan Jimenez, blin...@chromium.org
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

unread,
Jan 19, 2022, 12:02:55 PMJan 19
to Mathias Bynens, Ethan Jimenez, blin...@chromium.org
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:

It's a part of Interop 2022 for this reason

So I hope this all goes well :D

Best regards,
Philip

Ethan Jimenez

unread,
Jan 20, 2022, 3:57:17 PMJan 20
to Philip Jägenstedt, Mathias Bynens, blin...@chromium.org

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

unread,
Jan 20, 2022, 4:03:24 PMJan 20
to Ethan Jimenez, blin...@chromium.org, Philip Jägenstedt, Mathias Bynens
(I'm not Mathias, but...)

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

Ethan Jimenez

unread,
Jan 21, 2022, 12:07:25 AMJan 21
to Mike Taylor, blin...@chromium.org, Philip Jägenstedt, Mathias Bynens

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

unread,
Jan 21, 2022, 1:04:11 AMJan 21
to Ethan Jimenez, Mike Taylor, blin...@chromium.org, Philip Jägenstedt, Mathias Bynens, Rossen Atanassov
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

Mathias Bynens

unread,
Jan 21, 2022, 1:56:17 AMJan 21
to Ethan Jimenez, Mike Taylor, blin...@chromium.org, Philip Jägenstedt
Thank you for the update, Ethan! This clarifies a lot.

Reply all
Reply to author
Forward
0 new messages