A CSS grid sets three 200px columns and grid-template-rows: 100px 100px, but nine items are placed in it. The third row hugs its content instead of being 100px tall — why, and which property fixes it?

## What actually happened Three columns and nine items means three rows are needed. `grid-template-rows: 100px 100px` describes two. The browser cannot drop the last three items, so it creates a third row — an implicit row — and puts them there. Everything about that row is normal except its size, which comes from a different property than you expect. ```css .grid { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 100px 100px; /* rows 1 and 2 only */ /* row 3 exists, but nothing here sizes it */ } ``` ## Why grid-template-rows does not cover it A common mental model is that a track list is a repeating pattern — write two sizes and rows 3, 5, 7 get the first size and rows 4, 6 get the second. That is not how it works. `grid-template-rows` is positional: the first value sizes row 1, the second sizes row 2, and the list ends there. Rows beyond the list are not part of the explicit grid at all, so nothing in that declaration can reach them. ## The property that does cover it `grid-auto-rows` sizes implicit rows, and its initial value is `auto`. An `auto` track sizes to its content: its height is driven by the content contributions of the items inside it. So a 100px, 100px, content-height stack is exactly what the default produces. ```css .grid { grid-template-rows: 100px 100px; grid-auto-rows: 100px; /* every generated row is 100px */ } ``` That single line makes all three rows equal. Note the asymmetry that trips people up in review: the explicit sizes are written twice and the implicit size once, because one is a list of specific tracks and the other is a rule for all future tracks. ## The cycling list `grid-auto-rows` takes one or more track sizes, and when you give more than one the pattern repeats across the generated rows: ```css .grid { grid-auto-rows: 80px 160px; } /* implicit rows: 80px, 160px, 80px, 160px, ... */ ``` It is a list of track sizes, not a template, so `repeat()` is not valid there — you write the cycle out and it repeats on its own. ## The version you actually ship A hard `grid-auto-rows: 100px` makes rows uniform, but it also clips nothing and hides nothing: content taller than 100px simply spills out of its cell unless the item itself scrolls. For user-generated or translated content that is a real risk, so the production form is usually a floor with room to grow: ```css .grid { grid-auto-rows: minmax(100px, auto); } ``` Read that as: at least 100px, more if the content needs it. You keep the visual rhythm of the design in the common case and stay safe when a card carries three lines of text instead of one. ## Should the rows have been explicit at all? Often not. If nine items came from an API, they might be six tomorrow and fourteen next week, and `grid-template-rows: 100px 100px` is a guess that will be wrong most of the time. Declaring only the columns and letting every row be implicit is simpler and more honest: ```css .grid { display: grid; grid-template-columns: 200px 200px 200px; grid-auto-rows: minmax(100px, auto); gap: 16px; } ``` Now there is no seam where explicit rows stop and implicit ones start, so the bug in the question cannot occur. The mixed form is worth keeping only when the first rows genuinely differ — a taller hero row followed by uniform ones, for example — and then the mismatch between the two properties is intentional rather than an accident. ## How to diagnose this in the wild In devtools' grid overlay, the row line numbers keep counting past the tracks you declared, which is the tell that you are looking at implicit tracks. The quick check is arithmetic: count the items, divide by the number of columns, round up, and compare with the length of your `grid-template-rows` list. Any excess rows are the browser's, and only `grid-auto-rows` speaks to them. ## What to say out loud Name the row as implicit, name `grid-auto-rows` as the property that sizes implicit rows, name `auto` as its initial value, and then add the judgment: for content of unknown length, prefer declaring one axis and sizing the other with `grid-auto-rows` rather than guessing at a row count.