Implicit Row Track Property
Last updated: 2026-09-13
grid-auto-rows Implicit Row Track Property
The grid-auto-rows property controls the height of the implicitly created row tracks in a grid container. When a grid item is placed into a row that grid-template-rows did not define, the browser creates an implicit row automatically; this property sets the size of those auto-created rows. It ensures that rows which were not explicitly defined still have a consistent height.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
grid-auto-rows: <track-size>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | Computed automatically |
<length> | <percentage> | Type | Fixed implicit row height |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-auto-rows | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： grid-auto-rows: auto makes the implicit row heights fully content-driven, which can produce uneven row heights.
Tip： minmax(80px, auto) guarantees a minimum height while letting rows with more content grow automatically.
❓ FAQ
QWhat is the default value of grid-auto-rows?
AThe default is auto: the height of an implicit row is decided by the tallest item content in that row. That is why, without grid-auto-rows, the rows in a multi-row grid vary with the content. Remember that implicit rows only exist for items placed beyond the explicit rows defined by grid-template-rows; the rows you declared explicitly are sized by that property, while every other row falls back to grid-auto-rows. To enforce uniform rows, explicitly set grid-auto-rows: 100px or minmax(100px, auto) to override the default behavior.
QHow do I make all rows the same height?
ASet grid-auto-rows: 1fr or a fixed height such as 100px so the implicit rows match the explicit ones. 1fr suits rows that should scale with the container, but it is only meaningful when the container has a definite height; otherwise the row collapses to its content size. A fixed value suits card lists that need a tidy, uniform look. If the row count is fixed and the structure is clear, defining all the rows with grid-template-rows is cleaner.
QWhat does grid-auto-rows: minmax(100px, auto) mean?
Aminmax defines a range for the row heights: a minimum of 100px and a maximum of auto (growing with the content), so every row is at least 100px tall and grows automatically when the content is taller, never clipping it. Compared with a fixed height, minmax(100px, auto) keeps the cards tidy and the content safe; compared with pure auto, it avoids rows becoming too short and visually sparse when there is little content.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Implicit Column Tracks
Controls the width of implicit columns
Grid Row Tracks
Defines the structure of explicit rows
