Smart layout patterns with modern CSS
Smashing Conf Amsterdam - 2026 | Kevin Powell
.my-website {
all: ai;
}- Relative colors
- oklch(), lab(), hwb()
- light-dark()
- color-mix()
- clamp(), min(), max()
- cos(), sin(), tan(), atan()
- transition-behavior
- interpolate-size
- View transitions
- Customizable selects
- sibling-count(), sibling-index()
- Subgrid
- :has()
- Carousels
- Cascade Layers
- @scope
- Nesting
- Anchor positioning
- Grid Lanes
- animation-timeline
- Scroll-driven animations
- @starting-style
- @function
- if()
- attr()
- And a lot more
They’re so much smarter!
But adoption has been terrible.
Sad, but true.
webstatus.dev
Container queries
Widely availableFebruary 2023
- Chrome105
- Edge105
- Firefox110
- Safari16
:has()
Widely availableDecember 2023
- Chrome105
- Edge105
- Firefox121
- Safari15.4
We’ve been using @container wrong.
It’s all the fault of @media!
We need to change our approach when using them.
The numbers don’t have to be so magical.
Different units become more useful.
Other units open up new doors too!
piccalil.li/blog/reality-check-1-building-out-a-furniture-site-from-dribbble/
Container queries are only getting better.
Container style queries
Newly availableMay 2026
- Chrome111
- Edge111
- Firefox151
- Safari18
But wait, there’s more!
Container scroll-state queries
Limited availability
- Chrome133
- Edge133
- Firefox—
- Safari—
@media has served us well (and still has it’s use cases!)
But they look at the whole page.
But @container opens up new doors.
We can adapt layouts to the size they have available.
We can work with intrinsic breakpoints.
We can conditionally change layouts.
We can adapt to user interactions.
While they might look like a media query...
Container queries can do so much more.
Thank you!
Slides: kevinpowell.co/talks/smart-layout-patterns
CodePens: codepen.io/collection/ZQJrPB
Start writing CSS with confidence: cssdemystified.com SMASHING20