Why is a CSS grid column wider than its declared fraction?

Check whether the grid item in that column contains content that needs a lot of space, such as a long unbroken string. A plain 1fr track has an automatic minimum, which may be based on the grid item’s content. That intrinsic minimum can affect how the tracks fit, so the fraction alone does not always mean the track can shrink as far as you expect. [S1]

For a small reproduction, try this in a page where the grid has a constrained width:

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 320px;
}

.content {
  /* Put a long unbroken string here to test. */
}

Treat the width and content as example values, not requirements. If the surprising width appears only when the test content is present, that points to intrinsic sizing as a cause to investigate.

Compare the layout with and without the long content, keeping the grid container and column definitions unchanged. If the column’s behavior changes when that content is removed or replaced with a short placeholder, intrinsic sizing is a plausible explanation. If the behavior stays the same, check whether the grid container itself has the width you intended and whether your fraction values match the proportions you want.

This is a practical isolation test, not proof of every possible cause. The cited guidance establishes that a plain 1fr can have a content-based automatic minimum; it does not establish that this explains every oversized grid track. [S1]

Set an explicit zero minimum on the track that needs to shrink, while keeping its flexible maximum:

.layout {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1fr);
  width: 320px;
}

Here the first track keeps the plain 1fr definition, while the second gets minmax(0, 1fr). This sets a zero minimum and retains a flexible maximum, allowing the track to shrink below its content-based minimum. [S1]

Apply it to the track that shows the problem, then test with the actual content. This changes the track’s minimum constraint; it does not guarantee how every kind of content will appear inside the track.

Not automatically. Start with the track whose content-based minimum is preventing the layout you want. If multiple tracks need to shrink below their content-based minimum, try the explicit minimum on those tracks too, then review the result with representative content. For example, a three-column layout could use grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 1fr); if the two flexible columns are the ones that need that constraint; adjust the example value and column roles for your design.

Check that the columns fit the intended container and that important content remains usable. The cited guidance explains track sizing, but does not prescribe a universal layout or establish how your particular page should handle long content. [S1]