Smart layout patterns with modern CSS

Smashing Conf Amsterdam - 2026 | Kevin Powell 

.my-website {
  all: ai;
}

There is so much happening with CSS these days!

  • oklch()
  • Relative colors
  • color-mix
  • clamp(), min(), max()
  • cos(), sin(), tan(), atan()
  • transition-behavior
  • View transitions
  • sibling-count(), sibling-index()
  • Subgrid
  • :has()
  • Cascade Layers
  • Nesting
  • Scope
  • Anchor positioning
  • And a lot more 
@container

Designers don't need to worry context of where a component lives, just provide variations of it.

image here

Developers don't have to stress about arbitrary breakpoints, but work with the designers to make that component work as indended.

Sounds great! But no one started using them...

screenshot from here that's up to date: https://webstatus.dev/features/container-queries?q=container&startDate=2024-10-01&endDate=2026-01-21

It's not because of support

compare it to :has(), which has similar release date and support

Why not???
🤷

Some of their limitations make them seem like they are best suited for niche use cases.

We’ve been using @container wrong.

It’s all the fault of @media!

Screenshot of responsive by ethan marcott 
@media (min-width: 768px)
@container (min-width: 768px)
@media (min-width: 768px)

Thank you!

Slides: kevinpowell.co/talks/smart-layout-patterns

CodePens: codepen.io/collectionhere