CSS grid-template-rows Property
Example
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 100px 300px auto;
}1
2
3
4
5
6
7
8
Meaning
The grid-template-rows property defines the line names and track sizing functions of the grid rows.
Note: The size of the grid is not purely the sum of the track sizes, as row-gap, column-gap and justify-content, align-content can add additional space between tracks.
| Default value: | none |
| Inherited: | No |
| Animatable: | Yes |
| Version: | CSS Grid Layout Module Level 1 |
| JavaScript syntax: | |
Standard Syntax
grid-template-rows: none|auto|linename|flex|percentage|max-content|min-content|length|minmax(min, max)|repeat([positive-integer|auto-fill|auto-fit] , track-list)|fit-content([length|percentage])|subgrid|initial|inherit|initial|inherite|revert|revert-layer|unset;Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| none | Specifies no size. Rows are created if needed. |
| auto | Specifies that the size of the rows is determined by the size of the container, and on the size of the content of the items in the row. |
| linename | A customIdent specifying a name for the line in that location. |
| percentage | It is a non-negative percentage value relative to the inline size of the grid container. |
| flex | It is a non-negative dimension with the unit fr specifying the track's flex factor. |
| max-content | Specifies that the size of each row to depend on the largest item in the row. |
| min-content | Specifies that the size of each row to depend on the smallest item in the row. |
| length | Specifies the size of the rows. |
| fit-content([length|percentage]) | Defines the formula max(minimum, min(limit, max-content)), where minimum represents an auto minimum (which is often, but not always, equal to a min-content minimum), and limit is the track sizing function passed as an argument to fit-content(). This is essentially calculated as the smaller of minmax(auto, max-content) and minmax(auto, limit). |
| repeat([positive-integer|auto-fill|auto-fit] , track-list) | Specifies a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form. |
| minmax(min, max) | Defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. |
| subgrid | Specifies the grid will adopt the spanned portion of its parent grid in that axis. Rather than being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid's definition. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
grid-template-rows: none;
}More Examples
1
2
3 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
4
5
6
Example
.grid-container {
display: grid;
grid-template-rows: 100px 100px 100px 200px 200px auto;
}linename
The grid lines can always be referred to by their numerical index, linename can make the grid-placement properties easier to understand and maintain.
Lines can be explicitly named in the grid-template-rows and grid-template-columns properties, or implicitly named by creating named grid areas with the grid-template-areas property.
1
2 some text
3
4
5
6
Example
.grid-container {
display: grid;
border: 2px dashed #ddd;
padding: 10px;
grid-gap: 10px;
grid-template-columns:
[first nav-start] 150px
[main-start] 1fr [last];
grid-template-rows:
[first header-start] 50px
[main-start] 1fr
[footer-start] 50px [last];
}
.grid-container > div {
background-color: #0069FF;
color: white;
padding: 16px;
text-align: center;
font-size: 32px;
}
.grid-container > div:nth-child(1) {
grid-column: first / last;
}
.grid-container > div:nth-child(2) {
grid-row: main-start / last;
}repeat()
The repeat() notation represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.
Example
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 200px);
}