← Back to functions

CSS Function

fit-content()

Grid

Sizes a grid track to fit its content, clamped to a maximum value.

Syntax

fit-content(max)

Example

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

Common use cases

  • Sidebar that sizes to its content up to a max
  • Label columns in form grids
  • Mixed intrinsic and fixed grid layouts

Practical developer insight

fit-content(max) behaves like minmax(auto, max) — the track shrinks to content size but never exceeds the specified maximum.

Related

minmax()repeat()grid-template-columns