Web Layouts guides for web & digital design

Grid or flexbox? Container queries or breakpoints? The answer is usually both, and the interesting part is knowing when. This category collects layout patterns that hold up on a real phone, not just a design canvas: subgrid for editorial pages, intrinsic sizing that survives long German words, and the dashboard structures that don't collapse at 320px. Every pattern ships with the CSS, the trade-off, and a note on browser support so you can use it Monday.

Most layout advice online assumes a clean, evenly-spaced design comp, and then falls apart the moment real content, a long headline, an unexpectedly tall image, a translated string, shows up. We write from the other direction: start with the messy content case and build a layout that survives it. That means real coverage of container queries versus media queries and when each one actually solves the problem better, intrinsic and fluid sizing with clamp() instead of a pile of breakpoints, and CSS Grid patterns like subgrid and named lines that keep editorial or dashboard layouts aligned without a wrapper div for every alignment tweak.

We also cover the parts that get skipped in most layout tutorials: what happens at 320px on an older Android phone, how a layout behaves with the OS text-size setting cranked up, and where flexbox is still the simpler, more honest tool even when grid feels like the fashionable choice.