grid-template-rows property in CSS

Example

A simple grid-template-rows property example:

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: 150px 250px;
    grid-gap: 15px;
    background-color: #2196F3;
    padding: 15px;
}

Laboratory

description & Usage

To determine the number and height of rows in a grid layout, we use the grid-template-rows property.

Informations

#	Description
Default Value	none
Inherited	no
Animatable	yes
Version	CSS Grid Layout Module Level 1
JavaScript syntax	object.style.gridTemplateRows="50px 200px"

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
grid-template-rows

Syntax

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

Values

Values	Description
none	No size is specified.
auto	The size of the rows is determined in such a way that the layout is done based on the content inside them.
max-content	The size of the rows is determined in such a way that they are based on the largest row in the layout.
min-content	The size of the rows is determined in such a way that they are based on the smallest row of the layout.
length	Sets the size of the lines to be efficient than the legal length value on that page.

grid-template-rows property CSS

Example

description & Usage

Informations

Browser compatibility and Support

Syntax

Values