HTML Guide for grid-template-rows

CSS: “grid-template-rows”: X is not a “grid-template-rows” value.

The specified value for the grid-template-rows property is not valid. This CSS property specifies the height of each row in a CSS grid layout.

Correct Usage of grid-template-rows

The grid-template-rows property accepts several types of values:

Length values (e.g., px, em, rem):
```
grid-template-rows: 100px 200px;
```
Percentages:
```
grid-template-rows: 50% 50%;
```
Flexible units (fr):
```
grid-template-rows: 1fr 2fr;
```
Auto keyword:
```
grid-template-rows: auto auto;
```
Repeat function:
```
grid-template-rows: repeat(3, 1fr);
```

Minmax function:

grid-template-rows: minmax(100px, 200px) auto;

Example

Here’s an example where we define two rows, one with a height of 100px and the other one of 200px.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example of grid-template-rows</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .grid-container {
      display: grid;
      grid-template-rows: 100px 200px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div>Row 1</div>
    <div>Row 2</div>
  </div>
</body>
</html>