🎨 Your Grid Columns Are Ignoring the Widths You Explicitly Set
A CSS Grid is given explicit column widths – `grid-template-columns: 1fr 1fr 1fr` – and one column still ends up wider than the others, stretching the whole layout, because a grid track’s MINIMUM size defaults to the size of its content, and long unbreakable content (a URL, a wide image, a long unbroken word) can override the width you asked for.
🔎 The Problem
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
/* Looks like it should split evenly into three equal columns - but a
child with a long unbreakable string (a URL, a code snippet, an
un-hyphenated word) forces its column wider than 1fr, because grid
tracks default to `min-width: auto`, which means "at least as wide
as my content needs to be", NOT "exactly this fraction of space". */
✅ Fix: Override the Implicit Minimum Size
- Add `min-width: 0` to the grid items (not the grid container) – this is the single most common fix, since it explicitly overrides the default `auto` minimum that lets content dictate track size.
- Alternatively, define columns with `minmax(0, 1fr)` instead of a bare `1fr` – `grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)` – which achieves the same result directly on the track definition rather than on each item.
- For the specific case of long unbreakable text, pairing the `min-width` fix with `overflow-wrap: break-word` (or `word-break: break-all` for things like raw URLs) lets the content actually wrap instead of just being clipped once it’s no longer forcing the column wide.
⚠️ Why This Isn’t Obvious From the Spec Name
- `1fr` describes how leftover space is DISTRIBUTED, not a maximum the track is capped at – it’s entirely consistent with the spec for a `1fr` track to end up wider than an equal split if its minimum content size demands it.
- This is the direct CSS Grid analogue of the same `min-width: auto` behavior that trips people up with Flexbox – the underlying flexbox/grid rule about implicit minimum sizing is identical, only the property name differs.
‘1fr’ is a promise about how space gets divided, not a promise about how small a track is allowed to get – content can still force it wider unless you say otherwise.