Responsive design demo

Resize the window

The grid below changes from 1 column → 2 → 3 as the viewport widens.

Mobile-first

Default styles target small screens; media queries upgrade the layout.

Fluid grid

CSS grid + breakpoints adapt content density to viewport size.

Dark mode

Honors prefers-color-scheme: change your OS theme to test.

Touch-friendly

Generous spacing and large hit targets for mobile.

Performance

No external assets — all CSS inline for instant render.

Accessible

Semantic landmarks, keyboard-navigable links, sufficient contrast.