CSS grid-auto-rows Property

CSS grid-auto-rows property specifies the size of the rows which are created implicitly. A row is called an implicitly created row if its size is not defined by the grid-template-rows or the grid-template-areas property.

In simple words, we can say that the grid-auto-rows property only affects the rows which are not sized by the grid-template-rows or the grid-template-areas property.

In the example below, the first row is not an implicitly created row. Because its size is defined by the grid-template-rows property. This row will not be affected by the grid-auto-rows property. The grid-auto-rows property will only affect the second and the third row as they are created implicitly.

The property grid-auto-rows: 150px 200px; in the example below will set the height of the second row to 150px and the third row to 200px. Try it out:

Example:

.grid-container{
  display: grid;
  grid-template-rows: auto;
  grid-auto-rows: 150px 200px;
}

CSS Syntax

The grid-auto-rows property has the following syntax:

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

Property Values

The grid-auto-rows property accepts the following values:

autoThis is the default value. The browser itself determines the size of the row.
lengthSpecifies the size of the row in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
min-contentDefines the minimum possible size that a row can have without disturbing the grid layout.
max-contentDefines the maximum possible size that a row can have without disturbing the grid layout.
initialSets the grid-auto-rows property to its default value(auto).
inheritInherits the grid-auto-rows property from the parent element.

General Info

Default Valueauto
InheritedNo
JavaScript Usageelement.style.gridAutoRows = “150px 200px”