Css Grid Template Rows

CSS grid template rows

Created By: chatGPT

The grid-template-rows property in CSS allows you to define the number of rows in a grid container and their respective heights. You can specify multiple heights, and they will apply to their respective rows. The values can be defined in various units such as pixels, percentages, or fractions. Understanding how to utilize grid-template-rows is essential for creating flexible and responsive layouts.

css
.example {
    display: grid;
    grid-template-rows: 100px 200px auto;
}

In the example above, we have a grid with three rows. The first row is set to 100px, the second row to 200px, and the third row's height will adjust automatically based on the content, since it is defined as auto. This gives you the ability to create layouts that can adapt to different screen sizes and content amounts.

html
<div class="example">
    <div>Row 1</div>
    <div>Row 2</div>
    <div>Row 3</div>
</div>

You can also use the fr unit (fractional unit) to create responsive layouts. Using fr allows you to distribute the available space in the grid container proportionally. For example, if you want the first row to take up half of the available space and the second row to take up the other half, you can set it like this:

css
.example {
    display: grid;
    grid-template-rows: 1fr 1fr;
}

This will create two rows where both will share equal height regardless of the content within them. If you have additional rows, you can mix and match fixed and flexible heights. For instance, if you wanted a fixed height for the first row and flexible heights for the subsequent rows, you could define it like this:

css
.example {
    display: grid;
    grid-template-rows: 150px 1fr 2fr;
}

In this case, the first row is 150px, the second row uses 1fr, and the third row uses 2fr. This means the third row will take twice the height of the second row, creating a dynamic layout that adjusts according to the available space.

html
<div class="example">
    <div>Fixed Row</div>
    <div>Flexible Row 1</div>
    <div>Flexible Row 2</div>
</div>