CodePark/ questions / Grid
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Grid

What does minmax() do, and why do people write repeat(3, minmax(0, 1fr)) instead of repeat(3, 1fr)?

minmax(min, max) sets a size range for a grid track, which is a row or a column. The track is never smaller than min and never larger than max. For example, minmax(200px, 1fr) stays at least 200px, but grows to share free space.

People write minmax(0, 1fr) because a bare 1fr track is really minmax(auto, 1fr). The auto minimum means the track can't shrink below its content's minimum size. Say one cell holds a long word, a wide image or a pre block. Then that column grows, and the columns stop being equal. Or the grid overflows its container.

minmax(0, 1fr) sets the minimum to zero. So the columns stay exactly equal, and the content must handle overflow itself, by wrapping, scrolling or truncating. It is the grid version of min-width: 0 on flex items.

  • minmax() sets a minimum and a maximum size for a track.
  • A plain 1fr really means minmax(auto, 1fr).
  • The auto minimum lets long content stretch a track.
  • minmax(0, 1fr) forces truly equal columns.