CSS Modern Layout Guide: When to Use Flexbox, Grid, and What's Changed in 2025
CSS Grid has been baseline-supported across all major browsers since 2017. Container Queries landed in all major browsers in 2023. Subgrid became broadly available in 2023. Yet most developers are still reaching for Flexbox for two-dimensional layouts and media queries for component responsiveness — not because Flexbox and media queries are wrong, but because the decision framework for choosing the right tool isn't clear.
Key Takeaways
- Flexbox is content-first — items determine their own sizes; ideal for things that wrap (nav items, tag lists, form controls)
- Grid is layout-first — you define the grid then place items into it; ideal for two-dimensional structures (page layout, card grids)
- Container queries let components respond to their container's width, not the viewport — essential for reusable components in variable-width layouts
- Subgrid solves the "aligned cards" problem without JavaScript — grid items can participate in the parent grid's tracks
- Logical properties (margin-inline, padding-block) make RTL layout essentially automatic
The Decision Framework: Flexbox vs Grid
The mental model that makes this decision easy: ask whether the content should determine the layout, or whether you have a predefined layout that content should fill.
Flexbox is content-out: items have intrinsic sizes and the layout algorithm accommodates them. A navigation bar where some links are short and some are long, and you want them to space out naturally — that's Flexbox. A set of form fields you want to line up in a row until they wrap to the next line — that's Flexbox.
Grid is layout-in: you define "I want 3 equal columns and the first row should be 60px tall" and then place items. A full page with header/sidebar/main/footer — Grid. A product card grid where all cards must align on the image, title, description, and price lines — Grid with subgrid.
| Use Case | Use Flexbox | Use Grid |
|---|---|---|
| Navigation bar with variable-width items | ✓ | |
| Full page layout (header/sidebar/main) | ✓ | |
| Card grid with equal-width columns | ✓ | |
| Centering a single element | ✓ | ✓ both work |
| Form with label + input pairs | ✓ | ✓ Grid preferred |
| Tag cloud / badge row that wraps | ✓ | |
| Dashboard with overlapping elements | ✓ | |
| Content-driven photo gallery | ✓ (auto-fill) | |
| Toolbar with left + right groups | ✓ |
Container Queries: The Right Kind of Responsive
Media queries check the viewport width. Container queries check the container's width. This matters because a sidebar card at 280px and a main-area card at 600px may contain the same component — but media queries can't tell the difference between them because the viewport is the same.
Container Queries in Practice:
Subgrid: Solving Aligned Cards Without JavaScript
The classic problem: a row of product cards where the image, title, description, and price need to align across cards regardless of content length. Before subgrid, this required JavaScript to measure and set min-heights, or fixed heights that caused text overflow issues. Subgrid lets items in the grid column participate in the parent grid's row tracks:
Subgrid for aligned cards:
Color & CSS Tools
Developer & Color Tools
Color format converter (HEX/RGB/HSL/oklch), WCAG contrast checker, and other developer utilities to support your CSS work.
Open Developer Tools →