CSS in 2026: Container Queries, :has(), and Modern Layouts
CSS has quietly become powerful enough that most layout libraries are unnecessary. Three features changed how we write modern CSS and they are all production-safe in 2026. Container queries A component can finally respond to…
CSS has quietly become powerful enough that most layout libraries are unnecessary. Three features changed how we write modern CSS and they are all production-safe in 2026.
Container queries
A component can finally respond to its own container’s width, not just the viewport. This makes truly reusable card components possible — a product card looks one way in a sidebar, another in a grid, with no JavaScript and no wrapper classes. Mark a container with container-type: inline-size and use @container queries inside.
The :has() selector
The “parent selector” is real. Style a form differently when it contains an invalid field. Style a card differently when it contains an image. Style a list item when it has an expanded child. Patterns that used to require JavaScript class-juggling become one CSS rule.
Modern layout primitives
- Flexbox — still the right tool for one-dimensional layouts.
- Grid — the default for any 2D layout, especially with
minmaxandauto-fit. - Subgrid — finally lets nested grids align to their parent’s tracks.
- Logical properties —
padding-inline,margin-blockfor layouts that work in RTL automatically.
What to stop using
Pixel-perfect media query ladders, JavaScript ResizeObservers for layout, and most utility classes for spacing should give way to container queries and logical properties. Tailwind is still useful, but lean on the platform first.
