Create a responsive card grid without media queries

WHAT THIS TESTS: Whether you understand CSS Grid's intrinsic sizing and auto-placement keywords well enough to build a responsive layout without imperative breakpoints. The interviewer wants to see that you know how to delegate responsiveness to the browser's layout engine rather than manually managing viewport ranges.

A GOOD ANSWER COVERS: First, the declaration display: grid on the container. Second, grid-template-columns set to repeat(auto-fit, minmax(minimum, 1fr)) where minimum is a length like 250px or 20rem and 1fr is the maximum. Third, the role of the repeat function in generating tracks, minmax in setting a floor and ceiling, and auto-fit in fitting only non-empty columns into the available space. Fourth, the difference between auto-fit and auto-fill, specifically that auto-fill keeps empty tracks in the flow while auto-fit collapses them so extra space is redistributed to existing items. Fifth, the fact that no media queries are required because the browser wraps items to new rows automatically once the minimum width can no longer be satisfied.

COMMON WRONG ANSWERS: Reaching for Flexbox with flex-wrap and flex-basis instead of using Grid's track sizing. Suggesting media queries with breakpoint-based column changes like grid-template-columns: 1fr for mobile and repeat(3, 1fr) for desktop. Using repeat(auto-fit, minmax(250px, 1fr)) without explaining why auto-fit is chosen over auto-fill or what minmax actually does. Proposing JavaScript to measure container width and inject classes. Forgetting to mention that 1fr only absorbs free space after the minimum is satisfied.

LIKELY FOLLOW-UPS: When would you choose auto-fill over auto-fit? The answer is when you want to preserve explicit empty tracks for future content or to maintain a rigid column structure. How does this behave inside a container that is not the full viewport width? It works in any container because the grid responds to its own track container, not just the viewport. What happens if you use a fixed maximum like 300px instead of 1fr? The columns will not grow to fill leftover space, causing ragged edges. Can you combine this with dense packing? Yes, by adding grid-auto-flow: dense, though that changes visual ordering.

ONE CONCRETE EXAMPLE: A photo gallery container with grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) and gap: 1.5rem. On a 1440px monitor this yields five equal columns. On a tablet it drops to three. On a phone it becomes a single column. The same CSS handles all three states without a single media query because auto-fit collapses unused tracks and minmax enforces the 280px minimum before wrapping.

Source: css-tricks.com