Layout commons describe geometry without color or decorative borders. Stacks and centering do not choose a gap or box size; fill helpers deliberately occupy their available space. Add Standard utilities for the dimensions and spacing the context needs.
| Class | Layout |
|---|---|
stack-row |
Flex row with cross-axis centering |
stack-row-inline |
Inline flex row with cross-axis centering |
stack-column |
Flex column |
center-flex |
Flex box centered on both axes |
center-flex-inline |
Inline flex box centered on both axes |
center-grid |
Grid with CSS place-items: center |
fill-flex |
flex:1 and zero minimum inline/block sizes |
fill-absolute |
Absolute positioning with every inset set to zero |
fill-fixed |
Fixed positioning with every inset set to zero |
scroll-x, scroll-y |
Physical-axis auto overflow, contained overscroll, and zero minimum width/height |
scroll-inline, scroll-block |
The corresponding logical-axis scrolling contract |
<div class="stack-row gap:2 flex-wrap:wrap">
<span>Draft</span>
<span>Reviewed</span>
</div>
<div class="center-grid min-h:20">Centered in the available box</div>For an overflowing region, set a real dimension and make it reachable by keyboard. A label helps readers understand why an extra tab stop is present.
<section aria-label="Recent activity" class="scroll-y h:24 focus-ring" tabindex="0">
<div class="stack-column gap:2 min-h:40">Long content goes here.</div>
</section>scroll-x and scroll-y contain overscroll; they do not choose a scrollbar
style or guarantee that focused descendants are fully visible. Check focus
scrolling in the target browsers and add application behavior if needed. Do
not make a region focusable when it never actually overflows. Prefer logical
scrolling for text-flow layouts; use physical axes for fixed geometry.
fill-absolute needs an appropriately positioned containing block. fill-fixed
normally fills the viewport, unless an ancestor establishes its containing
block. Neither helper supplies a z-index, backdrop, or accessible overlay behavior.