Intrinsic sizing: min-content, max-content, auto

Sizes based on content, not pixels

CSS Grid offers three "intrinsic" track sizes:

grid-template-columns: min-content 1fr max-content;

• `min-content` — the smallest size where the content doesn't overflow. For text: the width of the LONGEST WORD.
• `max-content` — the size where the content uses no line breaks. For text: the width of the FULL UN-WRAPPED line.
• `auto` — the browser picks something reasonable based on content + available space.

When each is useful

/* Label column sized to its widest label, value column gets the rest */
.form-grid { grid-template-columns: max-content 1fr; }

/* "As narrow as possible" sidebar */
.nav { grid-template-columns: min-content 1fr; }

For form-style layouts, max-content 1fr is the perfect "label + input" recipe.

fit-content() — clamp intrinsic sizing

grid-template-columns: fit-content(200px) 1fr;

The first column is sized to its content, but capped at 200px. Above 200px it wraps. Useful for "as wide as content, but not absurd."