A grid column blowout caused by one oversized image or line

One giant image pushes my whole grid layout out of shape, and max-width:100% didn't fix it.

BeginnerRead 6 minDoing: under an hour6 steps

▶ Start

What you'll have at the end

A grid layout that no longer stretches out of shape when a cell gets an oversized image or a long unbroken string

Before you start

You need

A CSS Grid layout already built, with at least one flexible column (an fr track or auto) next to a fixed-width one, and a cell whose content, an image, a caption, or any other single unbroken piece of content, renders wider than the space you meant to give it.

Not covered

Reflowing the whole grid into a single column on narrow screens. That belongs to a breakpoint decision in a different recipe; this one only makes an existing column hold its assigned width.

Leans on

Confirming the blowout is real

Measure the actual column width
Cap the image the obvious way first

Fixing the actual default

Name the default causing both failures
Give the flexible track a real floor

Finishing the text and proving it holds

Let the long filename wrap in place
Recheck the fix at a phone width

Where to go next

Turn a wide, cramped data table into stacked mobile cards

reach for this instead when the oversized thing is a whole data table, not one image or line: it redesigns the table's own layout rather than just capping the grid column around it.

Checked 20 Aug 2026

Part of the CSS Grid Layout cookbook