Explicit vs implicit grid: how do you control implicit tracks?

WHAT THIS TESTS: This question probes whether you understand the boundary between declared grid structure and runtime track generation in CSS Grid. Seniors should know that grid-template-rows and grid-template-columns only set up the explicit grid, while the browser may silently create additional tracks when items are placed outside those bounds or when auto-placement overflows the defined area. It also checks if you know the specific properties that govern those generated tracks.

A GOOD ANSWER COVERS: First, define the explicit grid as the tracks created by grid-template-rows and grid-template-columns. Second, explain that the implicit grid consists of any extra rows or columns the browser auto-generates to hold items that do not fit inside the explicit bounds, such as when an item uses grid-column span 2 or grid-row 5 in a four-row grid. Third, state that implicit track sizing is controlled with grid-auto-rows and grid-auto-columns, which accept any track sizing value like 100px, 1fr, or minmax(100px, auto). Fourth, mention that grid-auto-flow determines how auto-placed items fill those implicit tracks, distinguishing between row and column dense packing.

COMMON WRONG ANSWERS: A common mistake is confusing implicit tracks with auto-fit or auto-fill inside a repeat function, which are explicit track strategies that collapse empty tracks rather than generate new ones. Another red flag is claiming that items outside the explicit grid simply overflow the container like absolutely positioned elements, when in fact the grid container expands to contain them. Some candidates also forget grid-auto-columns entirely and only mention grid-auto-rows, revealing shallow experience with horizontal overflow scenarios.

LIKELY FOLLOW-UPS: An interviewer might ask how grid-auto-flow dense changes item ordering, or when implicit tracks become a performance concern with large datasets. They may also ask you to compare minmax in explicit tracks versus sizing implicit tracks, or how auto-fit differs from simply letting implicit tracks handle responsiveness.

ONE CONCRETE EXAMPLE: Imagine a container with display grid and grid-template-columns set to repeat(3, 1fr), creating three explicit columns. If a child item has grid-column set to 4, the browser creates an implicit fourth column. Without grid-auto-columns, that new column defaults to auto width, but setting grid-auto-columns to 200px forces every implicitly created column to be exactly two hundred pixels wide. Similarly, if you place fifty items in a grid with only grid-template-rows set to repeat(2, 100px), the first two rows are explicit and the next forty-eight are implicit; grid-auto-rows set to 80px would size all overflow rows at eighty pixels each.

Source: developer.mozilla.org