Equal Width Columns in CSS Grid are Kinda Weird

Grid Columns That Stay Equal: The minmax() Fix

Writing grid-template-columns: 200px 200px 200px is rare in practice—what you typically want is three columns that share space fluidly. Fractional units like 1fr 1fr 1fr get you most of the way, but they come with a catch: 1fr has an implicit minimum of auto, not 0. That means a single long word, a wide <pre> block, or an unbroken URL can force a column to grow far beyond its intended share—a "grid blowout."

The fix is to explicitly cap how small a column can get. Instead of relying on the default minimum, set it to zero with minmax():

.el {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

That can be written more concisely:

.el {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

Once you know the trick it’s not hard, but it is the kind of rule that trips people up because it only surfaces when content misbehaves. If you consistently set max-width: 100% on media and handle long-text wrapping, you may never hit the issue.

Why Percentages Fall Short

Some developers opt for 33.33% instead of fractional units, reasoning it gives more predictable sizing. That works only if there’s no gap. Any gap you define is added on top of the percentage-based widths, so three 33.33% columns plus gaps will overflow the container. Workarounds like simulating gaps with padding inside each column are clunky and produce uneven spacing.

The issue gets enough attention that it inspired a widely shared visual guide by Wes Bos, and many developers encounter it through the related grid blowout discussions. The real lesson is about why min-width: auto is the default for grid items—understanding that makes the minmax(0, 1fr) pattern feel less arbitrary and more like a deliberate override rather than a hack. It would certainly be nicer if a “stay equal, always” shorthand existed, but for now, knowing the underlying behavior is what keeps your layouts stable.