CSS grid-template-rows Property
The grid-template-rows property in CSS is used to set the number of rows and height of the rows in a grid. The values of grid-template-rows are space-separated, where each value represents the height of the row.
Syntax:
grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;
Property Values:
- none: It does not set the height of the grid-template-row property. It creates rows when needed.
- auto: It is used to set the size of a row automatically i.e it depends on the size of the container & contents in the row.
- max-content: It represents the maximum content of the items present in the grid.
- min-content: It represents the minimal content of the items present in the grid.
- length: The size of the row is set according to the specified length.
Example 1:
html
<!DOCTYPE html> < html > < head > < title > CSS grid-template-rows Property </ title > < style > .Beginner { background-color: green; padding: 30px; display: grid; grid-template-columns: auto auto auto auto; grid-template-rows: auto auto; grid-gap: 10px; } .GFG { background-color: white; border: 1px solid white; font-size: 30px; text-align: center; } </ style > </ head > < body > < div class = "Beginner" > < div class = "GFG" >A</ div > < div class = "GFG" >B</ div > < div class = "GFG" >C</ div > < div class = "GFG" >D</ div > < div class = "GFG" >E</ div > < div class = "GFG" >F</ div > < div class = "GFG" >G</ div > < div class = "GFG" >H</ div > </ div > </ body > </ html > |
Output:
Example 2:
html
<!DOCTYPE html> < html > < head > < title > CSS grid-template-rows Property </ title > < style > .Beginner { background-color: green; padding: 30px; display: grid; grid-template-columns: auto auto auto auto; grid-template-rows: auto 150px; grid-gap: 10px; } .GFG { background-color: white; border: 1px solid white; font-size: 30px; text-align: center; } </ style > </ head > < body > < div class = "Beginner" > < div class = "GFG" >A</ div > < div class = "GFG" >B</ div > < div class = "GFG" >C</ div > < div class = "GFG" >D</ div > < div class = "GFG" >E</ div > < div class = "GFG" >F</ div > < div class = "GFG" >G</ div > < div class = "GFG" >H</ div > </ div > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 57.0
- Edge 16.0
- Firefox 52.0
- Internet Explorer 10.0
- Safari 10.1
- Opera 44.0