In CSS Grid, how do the track sizes min-content, max-content, and fit-content(400px) differ when used in grid-template-columns?

## Content-based sizing in one picture Given the text "Grid track sizing explained", the three sizes are: - **max-content** — the width of the whole phrase on one line, nothing wrapped. - **min-content** — the width of "explained", the longest single word, with the phrase wrapped at every opportunity. - **fit-content(<limit>)** — max-content while that fits under the limit, otherwise the limit. Every intrinsic size in CSS is one of the first two, or a clamp between them. Grid simply lets you name them as track sizes. ```css grid-template-columns: min-content fit-content(400px) max-content; ``` ## min-content A `min-content` track takes the largest **min-content contribution** among the items in it. For text that is the longest unbreakable run: a long word, a URL, a hash. For a replaced element such as an image it is that element's own intrinsic minimum. The track is as narrow as it can be without content being forced to overflow. Use it when a track must not compete for space — an icon column, a checkbox gutter, a label that should stay as tight as possible so a neighbouring `1fr` track gets everything else. ## max-content A `max-content` track takes the largest **max-content contribution**: the width of the content with wrapping suppressed. This is the right size for a column of short strings — a button, a date, a numeric total, a nav item — where wrapping mid-phrase looks broken. It is also a foot-gun. A `max-content` column containing a paragraph is as wide as the whole paragraph on one line, and grid will not shrink it back, so the grid overflows its container. "My column is a mile wide" is nearly always a `max-content` (or `auto` under content pressure) track holding prose. ## fit-content() `fit-content()` takes a length or percentage argument and gives you max-content sizing with a ceiling. Its resolved value is `min(max-content, max(auto-minimum, argument))`, which unpacks as three rules: 1. If the content's max-content width is under the argument, the track is exactly that content width — it hugs, just like `max-content`. 2. If the content is wider, the track stops at the argument and the content wraps inside it. 3. The automatic minimum still applies, so an unbreakable word wider than the argument still forces the track past it. That makes `fit-content(400px)` the honest answer to "hug the content, but never get ridiculous", which is what people usually mean when they reach for `max-content`. Note the argument must be a length or percentage — `fit-content(min-content)` is not a thing, and the bare keyword `fit-content` used as a track size behaves as `auto`. ## How they relate to `auto` An `auto` track is close to `minmax(min-content, max-content)`: it hugs its content between the two intrinsic bounds. The distinguishing detail is that `auto` tracks — and only `auto` tracks — can be stretched by content alignment when there is leftover space, whereas a `max-content` track never grows past its content. So `auto` is the forgiving default, and `max-content` is the promise that the track will never be wider *or* narrower than its content wants on one line. ## They are not flexible None of these tracks participates in free-space distribution. In `grid-template-columns: max-content max-content`, a wide container leaves a chunk of space unused at the end of the row rather than being shared out. That is a feature when you are building a toolbar or a form, and a surprise when you expected the row to fill. If you want hugging *and* filling, mix them: `max-content 1fr` hugs the first column and gives everything left to the second. ## A worked example ```css .form { display: grid; grid-template-columns: max-content 1fr; gap: 12px 16px; } ``` The label column is exactly as wide as the longest label — no manual `width` to maintain when the copy changes — and the input column takes the rest. Swap the first track to `fit-content(200px)` and the same layout survives someone adding a 40-word label: it caps at 200px and wraps instead of eating the form. ## Performance note Intrinsic sizing asks the browser to lay content out more than once to discover its min-content and max-content widths, so large numbers of intrinsic tracks over large subtrees are measurably more expensive than fixed or flexible tracks. It is rarely the first thing to optimise, but it is a real reason to prefer `minmax(<length>, 1fr)` over content-based tracks in very large grids.