grid-template-rows

christian.dinh2481 total contributions
Published Jul 14, 2021Updated Sep 3, 2021
Contribute to Docs
A property that specifies the row structure of a grid container.
Syntax
.grid-container {display: grid;grid-template-rows: <row-space> <row-space>;}
where <row-space>
can be one of the following:
- Grid keyword:
auto
,minmax()
,repeat()
- Pixel value:
300px
- Percent value:
25%
- Fractional unit value:
1fr
Example 1
A div split into three sections (e.g. header, main, footer).
.spam-container {display: grid;grid-template-rows: 15% 70% 15%;}
Example 2
Six equally sized columns that utilize the available space:
.eggs-container {display: grid;grid-template-rows: repeat(6, auto);}
All contributors
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- christian.dinh
- Anonymous contributor
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.