🎯 CSS Container Queries Demo

Try this: Drag the right edge of the container below to resize it and watch how the card changes!

The card will change colors, layout, and size based on the container's width, not the viewport width.

Resizable Container

This container uses CSS Container Queries to adapt its content based on its own size. Resize me by dragging the dashed border!

Responsive Card

I change my appearance based on my container's width, not the browser window!

Container Query Units Used:

  • cqi - 1% of the container's inline size (width in horizontal writing mode)
  • cqw - 1% of the container's width
  • cqh - 1% of the container's height
  • cqb - 1% of the container's block size (height in horizontal writing mode)
  • cqmin - smaller value of cqi or cqb
  • cqmax - larger value of cqi or cqb