Grids that survive real content

The mockup lie

Every design file contains a quiet lie: the content fits perfectly. Headlines are exactly two lines, product names are short and evenly matched, and every card has an image of the same proportions. Then the site goes live, and the first real product is called something with forty characters and no image at all.

Design with extremes

Before approving a layout, populate it with the worst plausible content:

• The longest title anyone could reasonably write.
• A title of a single short word.
• A missing image.
• A description that is three paragraphs long, and one that is empty.
• A name in a language with much longer words than English.

If the layout holds up under all of these, it will hold up in production.

Let the grid flex

CSS grid makes resilient layouts much easier than older techniques. A few patterns are especially useful:

auto-fill with minmax

grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)) produces as many columns as fit, each at least 16rem wide. The layout adapts to the container without a single media query.

Subgrid for aligned cards

When cards in a row contain titles of different lengths, their content drifts out of alignment. Subgrid lets each card share the parent's row tracks, so titles, descriptions, and buttons line up across the row regardless of length.

Container queries

A component often cares about the width of its container, not the width of the viewport. Container queries let a card switch from a stacked layout to a side-by-side one based on where it is placed, which makes components genuinely reusable.

Handle overflow on purpose

Decide in advance what happens when text is too long. Sometimes wrapping is right, sometimes truncation with an ellipsis is better, and occasionally a long unbroken string such as a URL needs overflow-wrap: anywhere to avoid pushing the layout sideways. The worst choice is not choosing, because the browser's default is often a horizontal scrollbar.

Images without fixed sizes

Use aspect-ratio and object-fit: cover to give every image slot a consistent shape regardless of the source file's proportions. Define what the slot shows when the image is missing, because sooner or later it will be.

Review with real data

The most reliable test is to load the layout with production content before launch. A page that has been reviewed with real titles, real images, and real gaps is a page that will not surprise anyone later.