Responsive layout
One layout that rearranges itself to fit any screen, from phone to widescreen, instead of a separate mobile site.
See it
What it is
One layout that rearranges itself for whatever screen it lands on, instead of a separate m.example.com for phones. Ethan Marcotte named it in 2010 with three ingredients: fluid grids, flexible images, and media queries. Modern CSS adds wrapping flex and grid, clamp() for type, and container queries so a component responds to its own box rather than the window.
Reach for it by default on anything public. The real work is deciding what changes at each size: three columns become one, the sidebar moves below or behind a button, the nav collapses, the hero image gets cropped tighter. Priority shifts, not just width.
Gotcha: responsive is not the same as shrunk. Type that scales down linearly becomes unreadable, tables squeezed to 375px become useless, and tap targets under 44px become a rage machine. Dragging your desktop browser narrow also lies: it does not reproduce touch, the address bar eating viewport height, or a notch. Test on a real device before calling it done.
Ask AI for it
Make this layout responsive, mobile-first: start with a single column and full-width elements, then use explicit CSS Grid steps, 'repeat(2, minmax(0, 1fr))' from 640px and 'repeat(3, minmax(0, 1fr))' from 1024px. Do not combine these exact column counts with auto-fit, which would pick its own number. Scale headings with clamp(), keep images at max-width 100% with a set aspect ratio so nothing jumps while loading, collapse the sidebar nav into a menu button below 1024px, and keep every tap target at least 44px. Verify at 375px, 768px, and 1440px with no horizontal scroll.