Detailed explanation
CSS Grid distinguishes between tracks you declare and tracks the browser creates as needed. The explicit grid is defined by grid-template-columns, grid-template-rows, and grid-template-areas. The implicit grid extends it when items need tracks beyond those boundaries. Both belong to the same grid layout; implicit tracks are not a separate container. This distinction matters for dynamic layouts, where the number of cards, products, or search results is unknown in advance.
In the given example, grid-template-columns: repeat(3, 1fr) declares three explicit columns, while no explicit rows are declared. With the default grid-auto-flow: row, the browser places ordinary, unpositioned items across the columns and creates implicit rows as necessary. The first three items occupy the first implicit row, and the next three occupy the second. Because grid-auto-rows: 100px is set, each of these rows is 100px tall. Importantly, even the first row is implicit here: a row does not become explicit simply because it appears inside explicitly defined columns.
Implicit tracks can also result from deliberate placement, not just automatic wrapping. For example, placing an item at grid-column: 5 in this three-column layout creates implicit columns to reach that position. Such columns are sized by grid-auto-columns; implicit rows are sized by grid-auto-rows. Both properties default to auto, which uses grid sizing rules involving item sizes and available space rather than guaranteeing one fixed size. These properties can also accept sizes such as minmax(100px, auto), allowing tracks to grow when content needs more room.
In interviews, explain track creation separately from track sizing and item placement. Template properties establish the explicit structure, auto-sizing properties size tracks not sized by the templates, and grid-auto-flow controls the auto-placement algorithm. Mention that repeat(auto-fit, ...) and repeat(auto-fill, ...) still define explicit tracks despite their responsive counts. A useful advanced detail is that negative line numbers, such as -1, refer to the explicit grid's ending lines, not the final lines of any implicit extension.
Key points to remember
- The explicit grid comes from grid-template-columns, grid-template-rows, and grid-template-areas.
- Implicit tracks are created when auto-placement or explicit item placement requires additional tracks.
- grid-auto-rows and grid-auto-columns size implicit tracks; both default to auto.
- In the example, three columns are explicit, but every generated row is implicit and 100px tall.
- grid-auto-flow controls placement direction and packing, not track sizes.
Common mistakes candidates make
- Assuming the first visible row is explicit even when no rows or template areas are declared.
- Saying implicit tracks appear only when items outnumber the explicitly defined cells, ignoring deliberate out-of-range placement.
- Treating auto-fit or auto-fill tracks as implicit because their count is calculated automatically.
Likely follow-up questions
What happens if grid-template-rows: 60px is added to the example?
The first row becomes an explicit row sized at 60px. Additional rows created as needed are implicit and use grid-auto-rows: 100px.
Does grid-column: 1 / -1 span implicit columns too?
Not necessarily: -1 identifies the ending line of the explicit grid. Implicit columns extending beyond that line are not included in this span.
Can implicit rows grow to accommodate long content?
Yes: use grid-auto-rows: minmax(100px, auto) to give each implicit row a minimum height while allowing growth. A fixed 100px row does not grow just because its content is taller, so content may overflow.
Interview tip: Start with the declared-versus-generated distinction, then trace six items through the example to show three explicit columns and two implicit rows.