A Practical Guide to CSS Grid, Flexbox and Container Queries
The modern CSS layout tools: Flexbox for arranging items along one axis, Grid for two-dimensional layouts, and container queries for components that adapt to the space they sit in.
Marcus Adeyemi
What is at stake
They replace floats, fixed widths and layout hacks, making responsive layouts simpler to build and cheaper to change later.
The playbook
- Use Grid for page structure and Flexbox inside components
- Let tracks size to content with minmax and auto-fit
- Use container queries for components reused in different column widths
- Keep source order logical so keyboard order follows reading order
- Test at widths between breakpoints, not only at them
Where it goes wrong
Avoid:
- Reordering content visually so it no longer matches the page order
- Fixed pixel widths that break on narrow screens
- Stacks of nested flex containers imitating a grid
- Breakpoints tied to particular device models
The numbers behind it
| Measure | Figure |
|---|---|
| Flexbox | one-dimensional layout along a row or a column |
| Grid | two-dimensional layout of rows and columns at once |
| Container queries | style a component based on its container's size rather than the viewport |
| Browser support for container size queries | all major browsers since 2023 |
| Subgrid | lets a nested grid align to its parent grid's tracks |
Getting outside help
When to hand it over: Bring in help when a legacy layout built on floats or frameworks needs modernizing, or when components break whenever they move to a different column.
Where this comes from
- MDN Web Docs — CSS grid layout
- MDN Web Docs — CSS flexible box layout
- MDN Web Docs — CSS container queries
The figures and practices above come from the sources listed.
Working on something like this?
We take on Web Design & Development work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
