CSS Grid: difference between 1fr and auto column sizing?

WHAT THIS TESTS: This question tests whether you understand the CSS Grid track sizing algorithm beyond surface-level syntax. A senior engineer should know how the grid container distributes leftover space, how minimum sizing constraints interact with content, and why choosing the wrong unit creates overflow or unexpected shrink behavior in responsive layouts.

A GOOD ANSWER COVERS: A strong answer hits four things in order. First, define 1fr as a fractional unit that consumes a proportion of the remaining space after all non-flexible tracks are sized. Second, define auto as a track size that collapses to the content's intrinsic width, behaving like shrink-wrap. Third, explain the minimum sizing difference: a 1fr track has a default minimum size of auto, so unbreakable content like a long word or image can force it wider than its fractional share and overflow the container unless you override it with minmax. An auto track simply expands to contain its content and does not fight for leftover space. Fourth, note that auto only absorbs leftover space when no fr tracks are competing for it.

COMMON WRONG ANSWERS: Red flags include saying they are identical, claiming auto always fills remaining space like 1fr, or stating that 1fr tracks can shrink below their content size by default. Another weak pattern is ignoring minimum sizing entirely and blaming overflow on the container instead of the track definition.

LIKELY FOLLOW-UPS: An interviewer might ask how to prevent a 1fr column from overflowing with large content, which leads to minmax(0, 1fr). They might also ask what happens when you mix auto and 1fr columns in the same grid, or how justify-content and align-content affect tracks sized with auto versus 1fr.

ONE CONCRETE EXAMPLE: Imagine a two-column layout with grid-template-columns: 200px 1fr. The 1fr column takes the remaining width. If that column contains an image wider than the remaining space, the 1fr track defaults to min-width: auto and pushes the grid wider than its container, causing horizontal overflow. Changing the definition to minmax(0, 1fr) allows the track to shrink below the image's intrinsic size, respecting the container boundary. If you had used auto instead of 1fr, the second column would shrink to the image's width and leave unused space in the container rather than forcing overflow.