In CSS Grid, auto lets the browser size a track around its contents instead of forcing a fixed width. The result is responsive, content-aware layout. section 4.4.2
An auto track stays between its intrinsic minimum and maximum sizes: it can shrink to min-content, the smallest non-overflowing size, and grow toward max-content, the size needed without wrapping. min-width and max-width can tighten those limits. section 4.4.2
For a column, auto combines content limits with explicit element constraints:
- Use the larger of min-width and min-content as the lower bound. section 4.4.2
- Use the smaller of max-width and max-content as the upper bound. section 4.4.2
- Let the grid track sizing algorithm resolve the final size alongside explicit tracks, intrinsic contributions, and remaining fr space. section 4.3
A sidebar with practical limits
Set one track to auto and constrain the sidebar itself: .layout { display: grid; grid-template-columns: auto 1fr; } .sidebar { min-width: 150px; max-width: 300px; }. The sidebar remains at least 150px wide in a narrow viewport and stops at 300px in a wider one.
