Easy Tutorial
❮ Css3 Pr Animation Timing Function Pr Border Left ❯

CSS grid-auto-rows Property

Example

Set the default size of rows in the grid:


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-auto-rows 57 16 52 10 44

Property Definition and Usage

The grid-auto-rows property is used to set the default size of rows in a grid container.

This property only affects rows that do not have a size set.

Default value: auto
Inherited: no
--- ---
Animatable: Yes. Read about animatable Try it
--- ---
Version: CSS Grid Layout Module Level 1
--- ---
JavaScript syntax: object.style.gridAutoColumns="120px" Try it
--- ---

Syntax

grid-auto-rows: auto|max-content|min-content|length;
Value Description
auto Default value. The size of the row is determined by the size of the container.
max-content Sets the size of each row based on the largest grid item in the row.
min-content Sets the size of each row based on the smallest grid item in the row.
length Sets the size of the row using a custom length value. Read about length units

Related Articles

CSS Tutorial: CSS Grid Layout

CSS Reference: grid-auto-columns Property

❮ Css3 Pr Animation Timing Function Pr Border Left ❯