In CSS Grid, what does the track size minmax(200px, 1fr) mean when used in grid-template-columns?
answer
- a range, not a single size
- two arguments, minimum first
- never narrower than the floor
- fr is legal only as the maximum
basics
~20 sminmax(200px, 1fr) gives a grid column a 200px floor and a flexible ceiling: the track is never narrower than 200px, but it grows beyond that to absorb its share of the container's leftover free space.
solid answer
~40 s`minmax()` takes two arguments — a minimum and a maximum track size — and sizes the track somewhere between them. With `minmax(200px, 1fr)` the browser first guarantees the column at least 200px, then lets it expand by giving it one share of whatever space is left over after the other tracks and the gaps are accounted for. That combination is what makes grid responsive without media queries: a fixed comfortable minimum for the content, plus a stretchy maximum so nothing is left unfilled. The `fr` unit is only legal as the maximum — `minmax(1fr, 200px)` is invalid and the whole declaration is dropped. Note that a plain `200px` track is just `minmax(200px, 200px)`, and a plain `1fr` track is really `minmax(auto, 1fr)`, so `minmax()` is the general form the other syntaxes are shorthands for.
code
css · 5 lines.cards {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
gap: 16px;
}go deeper
Be ready to read minmax(200px, 1fr) out loud correctly: minimum first, maximum second, at least 200px and then grows. Knowing it is the standard responsive-card idiom is enough at this level.
Explain that fr is only legal as the maximum, that a bare 1fr expands to minmax(auto, 1fr), and that a plain length track is really a minmax with equal ends. Mention that an invalid minmax kills the whole declaration.
Show judgment about choosing the floor: pick it from the narrowest readable content width, and be explicit that when the container is narrower than the floor the grid overflows rather than crushing content. Explain when you would reach for minmax(0, 1fr) instead.
Own the convention: a shared floor token across a design system's grids keeps card layouts consistent, and choosing floors per component rather than per breakpoint is what removes media queries from the codebase. Be ready to argue when that consistency is worth more than per-page tuning.
## What a track sizing function is Every value listed in `grid-template-columns` or `grid-template-rows` is a *track sizing function* — an instruction for how wide (or tall) that one track should end up. Some are trivial: `200px` means "exactly 200 pixels". Others are ranges, and `minmax()` is the explicit way to write a range. ```css .grid { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr); gap: 16px; } ``` Read it left to right: *minimum first, maximum second*. The browser sizes the track to at least the minimum and at most the maximum, choosing a value inside that range based on the content and the space available. ## The minimum argument The minimum may be a length or percentage (`200px`, `20%`), or one of the content keywords `min-content`, `max-content`, or `auto`. It may **not** be an `fr` value: `fr` expresses a share of leftover space, and a floor cannot be defined in terms of space that has not been computed yet. Writing `minmax(1fr, 200px)` makes the declaration invalid, and an invalid declaration is discarded entirely — the grid falls back to whatever `grid-template-columns` value it had before, which usually looks like "my grid stopped working" rather than "one column looks odd". ## The maximum argument The maximum accepts the same values plus `<flex>` values such as `1fr` and `2fr`. When the maximum is an `fr` value the track is *flexible*: after all the non-flexible tracks and all the gaps have taken their space, whatever is left is divided among the flexible tracks in proportion to their flex factors. So `minmax(200px, 1fr)` means "at least 200px, and then take a share of what remains". ## Why the floor is the useful part A bare `1fr` column will happily shrink until the layout looks cramped. A floor stops that: the content has a guaranteed comfortable width, and if the container is genuinely narrower than the floor, the track stays at its minimum and the grid overflows rather than crushing the content. Overflow is a visible, debuggable failure; unreadable 40px-wide cards are not. This is exactly why `minmax(<some floor>, 1fr)` is the idiom you see in nearly every responsive card grid. ## The shorthands it generalises Several track syntaxes are really `minmax()` in disguise: - `200px` is `minmax(200px, 200px)` — a fixed track. - `1fr` is `minmax(auto, 1fr)` — this one surprises people: the *minimum* is `auto`, not zero, so a `1fr` track will not shrink below the minimum size its content needs. - `auto` behaves like `minmax(min-content, max-content)`, with the extra property that `auto` tracks (and only `auto` tracks) can be stretched by content alignment. - `fit-content(300px)` is a clamp built on the same machinery: max-content sizing, capped at the argument. Knowing that `1fr` expands to `minmax(auto, 1fr)` explains most "my fr column is too wide" bugs, and the explicit `minmax(0, 1fr)` is the standard remedy. ## Where minmax() can appear It is valid anywhere a track size is valid: in `grid-template-columns` and `grid-template-rows`, inside `repeat()`, and in the implicit-track properties. Percentages inside `minmax()` resolve against the grid container's corresponding content-box dimension, and if that dimension is indefinite the percentage behaves as `auto`. ## Reading a real declaration ```css grid-template-columns: 240px minmax(320px, 1fr) minmax(200px, 0.5fr); ``` That is a fixed sidebar, a main column with a 320px floor taking two thirds of the leftover space, and a rail with a 200px floor taking one third — because the flex factors 1 and 0.5 are normalised against their own sum, not against 1. If the flex factors total *less* than 1 the behaviour changes: each flexible track gets only that fraction of the free space and the remainder is simply left unused, which is a deliberate escape hatch, not a bug. The mental model to carry away: `minmax()` does not pick a size, it declares a legal range, and the track sizing algorithm then resolves a value inside that range from the content and the free space.
- What happens if you write minmax(1fr, 200px)?It is invalid. An `fr` value is only allowed in the maximum position, because a flex factor describes a share of leftover space and cannot serve as a floor. The browser discards the whole `grid-template-columns` declaration as invalid, so the grid falls back to a single implicit column rather than showing a slightly wrong track.
- What does a track sized minmax(200px, 1fr) do when the container is narrower than 200px?It stays at 200px. The minimum is a hard floor, so the track refuses to shrink further and the grid overflows its container. That is usually the behaviour you want — readable content that overflows is easier to spot and fix than content squeezed into an unusable width — but it means a floor plus a narrow viewport still needs a plan, such as a smaller floor or fewer columns.
- Is a bare 1fr track the same as minmax(0, 1fr)?No. A bare `1fr` is shorthand for `minmax(auto, 1fr)`, so its floor is the content's automatic minimum size, not zero. `minmax(0, 1fr)` sets the floor explicitly to zero, which lets the track shrink below its content and is the usual fix when a long word or a wide element widens a supposedly equal column.
minmax() is like booking a hotel room with a guaranteed minimum size and an upgrade clause: you will never get less than the 200px room, and if the hotel has spare capacity you get bumped up to a bigger one.
saying these in an interview costs you the question
- Says minmax takes maximum first, then minimum
- Thinks minmax(1fr, 200px) is a valid reversed form
- Believes minmax forces the track to always equal its maximum
- Assumes 1fr and minmax(0, 1fr) behave identically
- Thinks a minmax floor still shrinks when the container is too small