What does the grid-template-rows property do?
grid-template-rows sets the structure of rows in CSS Grid, defining how many rows there will be and the size of each one.
Example:
css
.container {
display: grid;
grid-template-rows: 100px auto 1fr;
}This creates three rows:
- a fixed one with a height of
100px - a row with an auto height based on content
- a flexible row that will take up the remaining space (
1fr)
The allowed units are the same as for columns: px, %, auto, fr, minmax(), repeat(), and others.
In short: grid-template-rows is responsible for the number and height of rows in the grid.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.