Using CSS Grid, how do repeat, auto-fit, and minmax create responsive columns?

WHAT THIS TESTS: This tests whether you understand intrinsic web design and CSS Grid track sizing beyond basic property names. Interviewers want to see that you can build responsive layouts without relying solely on media queries, that you grasp how the browser distributes leftover space, and that you know the precise difference between auto-fit and auto-fill behavior when tracks outnumber items.

A GOOD ANSWER COVERS: First, the exact declaration: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). Second, the role of repeat: it generates a repeated track pattern so you do not hardcode individual column values. Third, minmax: it sets a hard or soft floor, usually in pixels or ch units, and pairs it with a flexible upper bound like 1fr so cards never shrink below the minimum but share extra space equally. Fourth, auto-fit: it instructs the grid to collapse any empty repeated tracks down to zero width, which causes the remaining items to expand and fill the entire row. Fifth, the absence of media queries: the layout automatically reflows from four columns to three to two to one as the viewport narrows because the browser drops tracks that can no longer satisfy the minmax minimum.

COMMON WRONG ANSWERS: A common wrong answer is suggesting auto-fill instead of auto-fit without noting that auto-fill preserves empty tracks, leaving invisible gaps at the end of a row rather than stretching the actual cards. Another red flag is proposing media queries to change grid-template-columns at breakpoints, which defeats the purpose of the question and shows unfamiliarity with intrinsic sizing. Some candidates also misuse minmax by setting both values to fixed lengths, which prevents the responsive expansion the interviewer is looking for.

LIKELY FOLLOW-UPS: An interviewer might ask how to cap the maximum width of cards so they do not become unwieldy on ultra-wide screens; the answer is to wrap the grid in a max-width container or switch to minmax with a clamp. They might also ask about the dense keyword if the card heights vary, or how to handle uneven content without misalignment. Another follow-up is browser support and fallbacks for older environments.

ONE CONCRETE EXAMPLE: Imagine a product listing page where each card needs at least 280 pixels but should grow to fill the screen. You would write grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; on the container. On a 1440 pixel monitor, you get four columns. On a tablet, you get two. On mobile, one. No media queries are required for the column count because the browser removes tracks that violate the 280 pixel minimum and redistributes space via the 1fr upper bound.

Source: developer.mozilla.org