In this section, we will learn what the grid-auto-rows property is and how to use it in CSS.

Click here to run the example of grid-auto-rows property.

CSS grid-auto-rows Property Definition and Usage

When we create a grid, we can explicitly declare how many rows and columns the grid should have via `grid-template-rows` and `grid-template-columns` properties, respectively.

This is an explicit declaration and the problem with it is the fact that if we added more items than the number of available cells, the rest of items will not have the height or width declared using these properties.

So in order to solve this problem, CSS provided two new properties, named `grid-auto-columns` and `grid-auto-rows`.

Note: This section is about `grid-auto-rows` and you can read about `grid-auto-columns` in its section.

The CSS `grid-auto-rows` is used to set the width of those rows that are implicitly added to a grid.

Also, you should know that the values set for this property cannot override the values set using `grid-template-rows`.

Basically, this property only set the size of those rows that are implicitly added by browsers.

CSS grid-auto-rows Property Syntax

grid-auto-rows: auto|max-content|min-content|length;

CSS grid-auto-rows Property Value

The type of values that we set for this property are the same as `grid-template-rows` but there’s one important note to consider:

Let’s say we used this property in this way:

grid-auto-rows: 100px 300px;

The first implicit row will have the width of the first value and the second implicit row will have the width of the second value of this property.

Now, if for any reason the third implicit row was created, the width of that row will be equal to the first value set for this property. And of course, if later on there’s a fourth row, it will have the width of the second value set for this property.

Technically, the values set for `grid-auto-rows` cycles, which means the first implicit row will take the first number of this property, the second row will take the second number and so on until the numbers set as the value of this property reach to end which in that case browsers will pick from the first value and repeat the process for the next implicit rows.

Example: grid-auto-rows property in CSS

See the Pen grid-auto-rows property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.