Skip to content

Category · 21

Web Layouts guides for web & digital design

Modern CSS gave us grid, flexbox, container queries, and far fewer excuses for a broken layout. This section breaks down layout patterns that actually ship, when to reach for each one, and how to keep a design responsive without drowning in media queries.

← All articles

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.

Editorial coverage of web layouts for motion designers, art directors, and UI designers working with modern interface design. You'll find in-depth articles and step-by-step tutorials here. Each piece below was written by a working designer, peer-reviewed for accuracy, and links out to the primary source: the designer's portfolio, the original release notes, or the relevant studio site. We do not run sponsored articles or take payment for placement.

Newest articles appear first. Browse the 21 pieces below, or open the main archive for a full chronology across all categories. The designers index covers attributed work, and the styleframes gallery surfaces individual frames pulled from longer reels.

Latest Web Layouts articles