What does the grid-template-rows property do?
Understanding grid-template-rows in CSS Grid
The grid-template-rows property in CSS Grid defines the number, size, and height of the rows in a grid container. It sets up the horizontal tracks along which grid items are placed.
Key Points
Defines the number of rows in the grid.
Specifies the height of each row using lengths (
px,em), percentages (%), fractions (fr), orauto.Supports the
repeat()function for repeating rows with the same size.Works in combination with
grid-template-columnsto define the full grid structure.Example:
grid-template-rows: 100px auto 50px;creates three rows with fixed, auto, and fixed heights.
Example: Using grid-template-rows