The grid-auto-rows property
The grid-auto-rows property specifies
a number and width of rows that an element
will occupy in an implicitly-created grid.
Implicitly-created grid - a grid that
is created automatically when elements go beyond
the already designated grid. In the property value,
specify the width of the rows in any
size units.
The property is specified on the parent element
and determines the width of the rows of
child elements.
Syntax
selector {
grid-auto-rows: row width;
}
Example
Let's set the row width for our elements in the implicitly-created grid:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 200px;
grid-auto-rows: 40px 60px 80px;
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
See also
-
the
grid-auto-columnsproperty
that specifies a number and width of columns in an implicitly-created grid -
the
grid-template-rowsproperty
that specifies a number and width of rows in a grid
