What does the grid-template-rows property do?

Q: What does the grid-template-rows property do?

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. Defines the number of rows in the grid. Specifies the height of each row using lengths (`px`, `em`), percentages (`%`), fractions (`fr`), or `auto`. Supports the `repeat()` function for repeating rows with the same size. Works in combination with `grid-template-columns` to define the full grid structure. Example: `grid-template-rows: 100px auto 50px;` creates three rows with fixed, auto, and fixed heights. .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 150px 100px; gap: 10px; border: 2px solid #ccc; padding: 10px; } .item { background-color: #3498db; color: white; display: flex; justify-content: center; align-items: center; font-weight: bold; } Row 1 Row 2 Row 3 Row 4 Row 5 Row 6

Difficulty: 4/10

CSS Grid layout, responsive design, layout debugging

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

1
Defines the number of rows in the grid.
2
Specifies the height of each row using lengths (px, em), percentages (%), fractions (fr), or auto.
3
Supports the repeat() function for repeating rows with the same size.

Example: Using grid-template-rows

Scenario Questions

0-2 years experience

Follow-up Questions