CSS grid-auto-rowsProperty
Example
Set the default size of rows in the grid:
.grid-container {
display: grid;
grid-auto-rows: 150px;
}
Try it Yourself »
Browser Support
The numbers in the table indicate the first browser version that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| grid-auto-rows | 57 | 16 | 52 | 10 | 44 |
Property definition and usage instructions
The grid-auto-rows property is used to set the default size of rows in a grid container.
This property only affects rows without a set size.
| Default Value: | auto |
|---|---|
| Inherited: | no |
| animation: | Supported.Read Aboutanimatable Try it Yourself |
| Version: | CSS Grid Layout Module Level 1 |
| JavaScript Syntax: | object.style.gridAutoColumns="120px" Try it Yourself |
Syntax
grid-auto-rows: auto|max-content|min-content|length;
| Value | Description |
|---|---|
| auto | Default value. The size of the column is determined by the size of the container. |
| max-content | Set the size of each column based on the largest grid element in the column. |
| min-content | Set the size of each column based on the smallest grid element in the column. |
| length | Set the size of the column using a custom length value.Read about length units |
Related Articles
CSS Tutorial:CSS Grid Layout
CSS Reference Manual:grid-auto-columnsProperty
other extensions