CSS grid-auto-rows property
Description
When we do not specify the grid-template-rows to place an item or we place an item beyond the number of rows of a grid, the implicit tracks are automatically created to place an item. And 'grid-auto-rows' specifies the size of those implicit tracks.
For example, we have a grid with a first rows of size 20px explicitly define by grid-template-rows.
What If want to place an item in the second row that was not defined explicitly?
In this case, the second row is defined automatically. We define the implicit track size of second row with
grid-auto-rows.
Syntax
grid-auto-rows : auto | [track-size]+
Property values
autoDefault
-
The row occupies all the available space.
grid-auto-columns: auto;
track-size
-
The track size of second row is 40px defined implicitly. This pattern may be repeated to place more items in more columns.
grid-auto-rows: 40px;
track-size
-
The track size of second row is 120px defined implicitly.
grid-auto-rows: 120px;
Applicable to
It applies to grid containers.
From web4college, the free CSS digger
Bookmark this page
Ctrl+D
