Extend container-query grid to the flexbox grid - #42784
Draft
mdo wants to merge 3 commits into
Draft
Conversation
…g scale Every .row is now a query container alongside .grid, so responsive column, offset, row-cols, and gutter classes respond to the row's own width instead of the viewport. Because gutter classes are set on the .row itself and an element cannot query its own container, the body element and .container/.container-fluid are now named query containers so a top-level row still resolves against the page width. Renames the .contains-* container-type utilities to .container-* and documents them on a new utilities page, and reworks the spacer and gutter scale so key 2 is .375rem with finer steps through the middle of the range.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Draft — opening this to capture where the container-query grid work stands.
dist/is intentionally not rebuilt here.Summary
Picks up the CSS Grid container-query work and extends it to the flexbox grid, plus a few things that got tangled up with it.
Both grids are now container-driven.
.rowjoins.gridas a query container (container-type: inline-size), andmake-grid-columns()generates.md:col-*,.md:offset-*,.md:row-cols-*, and the.md:g-*gutters with@containerinstead of@media. A.md:col-6in a narrow sidebar now splits when the row hits 768px rather than the viewport.Query containers on
bodyand.container. Gutter classes are set on the.rowitself, and an element can never query its owncontainer-type, so the responsive gutter variants were previously dead code. Making<body>(namedbody) and.container/.container-fluid(namedlayout) query containers gives them an ancestor to resolve against..contains-*renamed to.container-*. New.container-inline/.container-sizenaming, with a newutilities/containerdocs page, a sidebar entry, and all the stale.contains-inlinereferences in card, list group, and stepper examples updated.Spacing scale rework.
$spacersand$gutterskey 2 becomes.375remwith finer steps through the middle of the range, which ripples through the spacing, margin, and gutter docs.Docs. Grid and gutter examples switch to
ResizableExamplewith the container-query breakpoint badge, there's a fullscreen grid playground dialog, and the migration guide gains notes for the viewport-to-container change and its containment side effects.Outstanding todos
Carried over from an adversarial review of this work. None are blockers for reviewing the direction, but they should be resolved before this ships.
.containerorbody), not the row they're applied to..md:g-3on a nested row keys off whatever ancestor container happens to be nearest, which is a different reference box than the sibling.md:col-*classes on the same row. The alternative is moving gutter declarations onto> *so they resolve against the row like everything else.md:means two things. Grid columns are container-based, but responsive utilities (.md:d-flex,.md:text-center, sticky, display, flex) are still viewport media queries. It's documented in the migration guide and on the new utilities page, but we should decide whether that split is the long-term story.container-type: inline-sizeestablishes a containing block forposition: absolute/fixeddescendants and creates a stacking context, and Chrome 129+ deliberately diverges from Safari/Firefox here. Worth checking dropdowns, tooltips, and menus inside rows across the browser matrix. Also: a.rowwhose inline size depends on its contents can collapse to zero.@supportsguard, so unsupported browsers drop every responsive column class and stack completely. Media-query grids degraded far more gracefully. Decide whether we care given the v6 support floor.ResizableExamplebadge mismeasures flexbox demos. It observes the first child of.bd-resizable-container, which for flexbox examples is.container, not the.rowthat actually carriescontainer-type. Between container padding and row negative margins it reads roughly one gutter low near each boundary. It should target the nearest descendant withcontainer-type.$spacers/$negative-spacers/$guttersrework is global and unrelated to the grid migration. It may deserve its own PR.container-typeyourself.Verified locally:
css-lint,css-compile,docs-build(no broken links), anddocs-lintall pass.