YouTipItem 1 (Explicit Row 1)
Item 2 (Explicit Row 1)
Item 3 (Implicit Row 2)
Item 4 (Implicit Row 2)
Pr Grid Auto Rows
# CSS grid-auto-rows Property
The `grid-auto-rows` property in CSS is used to set the default size (height) for any implicitly-created grid rows in a grid container.
When grid items are positioned outside of the explicitly defined grid (created using `grid-template-rows`), or when there are more grid items than can fit in the defined grid, the grid container automatically generates **implicit rows** to hold them. The `grid-auto-rows` property determines the size of these automatically generated rows.
---
## Quick Example
Set a default height of `150px` for all implicitly-created rows in a grid container:
```css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Explicitly define only the first row's height */
grid-template-rows: 100px;
/* Any automatically created rows below the first row will be 150px tall */
grid-auto-rows: 150px;
}
```
---
## Syntax
```css
grid-auto-rows: auto | max-content | min-content | length | percentage | flex;
```
### Property Values
| Value | Description |
| :--- | :--- |
| `auto` | **Default value**. The size of the rows is determined by the size of the container and the content of the items within the row. |
| `max-content` | Sets the row height based on the largest grid item in that row. |
| `min-content` | Sets the row height based on the smallest grid item in that row. |
| `length` | Sets the row height using a specific CSS length unit (e.g., `px`, `em`, `rem`, `vh`). |
| `percentage` | Sets the row height as a percentage of the grid container's height. |
| `flex` | Sets the row height using a fractional unit (`fr`), allowing implicit rows to share the remaining space. |
---
## How It Works: Explicit vs. Implicit Grids
To understand `grid-auto-rows`, it is essential to understand the difference between the **explicit grid** and the **implicit grid**:
* **Explicit Grid**: Defined manually using `grid-template-rows` and `grid-template-columns`.
* **Implicit Grid**: Created automatically by the browser when grid items are placed outside the bounds of the explicit grid (e.g., if you have 6 items but only defined a $2 \times 2$ explicit grid).
The `grid-auto-rows` property **only affects the implicit rows**.
### Code Example: Demonstrating Implicit Rows
```html
```
```css
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
/* Only define the height of the first row */
grid-template-rows: 80px;
/* Define the height of any automatically generated rows */
grid-auto-rows: 150px;
gap: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
```
In this example:
* **Row 1** (containing Item 1 and Item 2) is part of the explicit grid and will be exactly `80px` tall.
* **Row 2** (containing Item 3 and Item 4) is automatically created by the browser. Because of `grid-auto-rows: 150px`, this implicit row will be `150px` tall.
---
## Advanced Usage: Multiple Values
You can specify multiple track sizes for `grid-auto-rows`. When you provide multiple values, they will be applied in a repeating pattern to the implicit rows.
```css
.grid-container {
display: grid;
grid-template-columns: 1fr;
/* Implicit rows will alternate between 100px and 200px in height */
grid-auto-rows: 100px 200px;
}
```
* **Row 1 (Implicit)**: 100px
* **Row 2 (Implicit)**: 200px
* **Row 3 (Implicit)**: 100px
* **Row 4 (Implicit)**: 200px
* *(and so on...)*
---
## Specifications & Technical Details
| Feature | Details |
| :--- | :--- |
| **Default Value** | `auto` |
| **Inherited** | No |
| **Animatable** | Yes (supports length, percentage, or calc() transitions) |
| **Specification** | CSS Grid Layout Module Level 1 |
| **JavaScript Syntax** | `object.style.gridAutoRows = "150px"` |
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the `grid-auto-rows` property:
| Property | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :---: | :---: | :---: | :---: | :---: |
| **`grid-auto-rows`** | 57 | 16 | 52 | 10.1 | 44 |
---
## Related Properties
* [`grid-auto-columns`](pr-grid-auto-columns.html): Sets the default width of implicitly-created grid columns.
* [`grid-template-rows`](/css/css-grid.html): Defines the explicit row tracks of the grid.
* [`grid-auto-flow`](/css/css-grid.html): Controls how the auto-placement algorithm works, specifying whether implicitly added items flow into rows or columns.