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 
@container

They’re so much smarter!

But adoption has been terrible.

Sad, but true.

webstatus.dev

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()

But wait, there’s more!

@container scroll-state()

@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