← Back to docs

Responsive design patterns

Build layouts that adapt gracefully from mobile to ultrawide without breakpoint spaghetti.

Fluid grid with clamp()

Replace media queries with intrinsic sizing. The column track shrinks and grows between a minimum and maximum without a single breakpoint.

grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 25%, 320px), 1fr));

Container queries

Style a component based on its parent's width, not the viewport. Perfect for reusable cards that land in sidebars and full-width zones.

@container (min-width: 400px) { grid-template-columns: 1fr 1fr;}

Picture + srcset

Serve the right image density without JavaScript. Combinesrcsetwithsizesso the browser picks the optimal resource before paint.

<img srcset="hero-640.webp 640w, hero-1280.webp 1280w" sizes="(max-width: 768px) 100vw, 50vw" />

Logical properties

Usepadding-inlineandmargin-blockinstead of left/right/top/bottom. Your layout flips correctly for RTL languages with zero extra work.

← All recipes