CSS Grid is a powerful layout system that allows developers to create complex and responsive layouts with ease. One of the key features of CSS Grid is the ability to define rows and columns using the grid-template-rows and grid-template-columns properties. In this article, we will focus on the grid-template-rows property and how it can be used to create flexible and dynamic layouts.
The grid-template-rows property is used to define the rows of a CSS Grid layout. It allows developers to specify the height of each row, as well as the number of rows in the grid. This property is used in conjunction with the grid-template-columns property to create a complete grid layout.
When using the grid-template-rows property, developers can specify the height of each row using a variety of units, including pixels, percentages, and fractions. They can also use the auto keyword to allow the row to automatically adjust its height based on the content within it.
Let's take a look at some examples of how the grid-template-rows property can be used to create different types of layouts.
In this example, we will create a grid layout with three rows of equal height. We will use the repeat() function to specify the number of rows, and the 1fr unit to specify that each row should take up an equal amount of space.
<div class="grid-container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.item {
background-color: #ccc;
border: 1px solid #999;
}
In this example, we have created a grid layout with three rows of equal height. Each row takes up one-third of the available space in the grid container.
In this example, we will create a grid layout with two rows of fixed height. We will use the px unit to specify the height of each row.
<div class="grid-container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
.grid-container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: repeat(3, 1fr);
}
.item {
background-color: #ccc;
border: 1px solid #999;
}
In this example, we have created a grid layout with two rows of fixed height. The first row is 100 pixels tall, and the second row is 200 pixels tall.
In this example, we will create a grid layout with two rows of auto height. We will use the auto keyword to allow the rows to adjust their height based on the content within them.
<div class="grid-container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
.grid-container {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: repeat(3, 1fr);
}
.item {
background-color: #ccc;
border: 1px solid #999;
}
In this example, we have created a grid layout with two rows of auto height. The height of each row will adjust based on the content within it.
The grid-template-rows property is a powerful tool for creating flexible and dynamic layouts with CSS Grid. By using this property, developers can define the height of each row in a grid layout, as well as the number of rows in the grid. This allows for a wide range of layout possibilities, from equal height rows to rows that adjust their height based on the content within them.