Web features: [Flexbox](https://webstatus.dev/features/flexbox) [flex-wrap: balance](https://webstatus.dev/features/flexbox-flex-wrap-balance) [Grid](https://webstatus.dev/features/grid) [Subgrid](https://webstatus.dev/features/subgrid) [Container queries (size)](https://webstatus.dev/features/container-queries) [\](https://webstatus.dev/features/dialog) [Popover](https://webstatus.dev/features/popover) [Anchor positioning](https://webstatus.dev/features/anchor-positioning) [scrollbar-gutter](https://webstatus.dev/features/scrollbar-gutter) [line-clamp](https://webstatus.dev/features/line-clamp) [Small, large, and dynamic viewport units](https://webstatus.dev/features/viewport-unit-variants) [Grid lanes](https://webstatus.dev/features/grid-lanes) [aspect-ratio](https://webstatus.dev/features/aspect-ratio) [Logical properties](https://webstatus.dev/features/logical-properties)
> [!NOTE]
> **Note:** These guides are authored for AI coding agents (apologies for the robotic tone!). To have your coding agent adopt these patterns automatically, check out [Modern Web Guidance](https://github.com/GoogleChrome/modern-web-guidance).
1. [1 Fundamentals](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css-layout.md.txt#1_fundamentals)
1. [Which layout mode to use?](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css-layout.md.txt#11_which_layout_mode_to_use)
2. [Working principles](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css-layout.md.txt#12_working_principles)
2. [2 Flexbox](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css-layout.md.txt#2_flexbox)
3. [3 Grid and subgrid](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css-layout.md.txt#3_grid_and_subgrid)
1. [Code example: grid and subgrid](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css-layout.md.txt#31_code_example_grid_and_subgrid)
4. [4 Container queries](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css-layout.md.txt#4_container_queries)
1. [Code example: fluid typography using container query units](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css-layout.md.txt#41_code_example_fluid_typography_using_container_query_units)
5. [5 Native overlays, anchor positioning, and stacking contexts](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css-layout.md.txt#5_native_overlays_anchor_positioning_and_stacking_contexts)
6. [6 Overflow tracking and layout stability](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css-layout.md.txt#6_overflow_tracking_and_layout_stability)
7. [7 Viewport mechanics and track distribution](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css-layout.md.txt#7_viewport_mechanics_and_track_distribution)
8. [8 Grid lanes (aka masonry)](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css-layout.md.txt#8_grid_lanes_aka_masonry)
## 1 Fundamentals
Lean on the browser's layout engine when possible for better performance. Reach for intrinsic sizing, logical properties, and `aspect-ratio` before resorting to hardcoded dimensions or complicated media-queries.
### 1.1 Which layout mode to use?
Walk the decision tree top-to-bottom and stop at the first match. Note that layouts can be nested within each-other and each decision is based on the use-case for that container.
1. **Is it a simple row OR column of items?** Use **flexbox** --- 1D, content-first, content distributes along a single axis.
2. **Does a nested element need to line up with its grandparent grid's tracks?** Use **subgrid** --- 2D, relationship-first, inherits parent tracks so grandchildren can align across siblings.
3. **Is it a complex page or component structure with rows AND columns?** Use **grid** --- 2D, layout-first, you define the skeleton and content fills it.
4. **Is the content a long flow of prose that should split into balanced columns?** Use **multi-column** --- 1D flow, newspaper-style.
5. **Are items of varied heights that need to be packed tightly?** Use **grid** with `grid-auto-flow: dense` today; reach for native masonry (aka "grid lanes") only when it ships in your Baseline target (see [§8](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css-layout.md.txt#8_grid_lanes_aka_masonry)).
6. **Does an element need to float above the page and stay spatially tethered to a trigger, even across DOM boundaries or stacking contexts?** Use **anchor positioning** --- `anchor-name` on the trigger, `position-anchor` on the overlay (see [§5](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css-layout.md.txt#5_native_overlays_anchor_positioning_and_stacking_contexts)).
### 1.2 Working principles
- Use logical properties (`inline-size`, `block-size`, `margin-inline`, `padding-block`, `inset-inline-start`) for layout dimensions and spacing --- see [CSS: Modern Architecture](https://developer.chrome.com/docs/modern-web-guidance/guides/css/css.md.txt) for full coverage.
- Apply the content-first vs layout-first mental model: flexbox when items dictate flow, grid when you define the skeleton first.
- Use the `place-*` shorthands (`place-content`, `place-items`, `place-self`) to align across both axes in one declaration.
- Reach for intrinsic sizing (`min-content`, `max-content`, `fit-content()`) and flexible tracks (`fr`, `minmax()`) before fixed `width`/`height` --- fewer media queries, more resilient layouts.
- Do NOT use `overflow: hidden` to mask layout issues --- fix them at the source. For example certain replaced elements like `