CSS grid-template-rows property
The grid-template-rows property in CSS is used to define the number and size of rows in a grid container. Similar to grid-template-columns, this property specifies how the available vertical space in the grid container should be divided among the rows.
Basic Syntax
selector {
grid-template-rows: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-rows: 100px 200px 100px; /* Three rows with specific heights */
grid-gap: 10px; /* Space between grid items */
}
.item {
background-color: lightcoral;
border: 1px solid red;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
In this example, the grid-template-rows property is set to 100px 200px 100px, creating three rows with specific heights of 100px, 200px, and 100px respectively.
Values for grid-template-rows
1. Fixed Length
You can specify row sizes using fixed lengths like px, em, rem, etc.
.container {
display: grid;
grid-template-rows: 150px 200px; /* Two rows with fixed heights */
}
2. Percentage
You can use percentages to define rows as a proportion of the container's height.
.container {
display: grid;
grid-template-rows: 30% 70%; /* Rows that take up 30% and 70% of the container height */
}
3. Flexible Lengths (fr)
The fr unit represents a fraction of the available space in the grid container. This is useful for creating flexible layouts where rows adapt to the container size.
.container {
display: grid;
grid-template-rows: 1fr 2fr; /* Two rows, the second is twice as tall as the first */
}
4. Auto
The auto keyword allows rows to size themselves based on their content. If you set rows to auto, they will expand to fit the content within them.
.container {
display: grid;
grid-template-rows: auto auto; /* Two rows that expand based on content */
}
5. Repeat Notation
The repeat() function allows you to define a pattern for rows. This can simplify the code when you have many rows of the same size.
.container {
display: grid;
grid-template-rows: repeat(3, 1fr); /* Three rows of equal height */
}
6. Minmax Function
The minmax() function sets a minimum and maximum size for rows, allowing for responsive designs that adapt to the container size.
.container {
display: grid;
grid-template-rows: repeat(3, minmax(100px, 1fr)); /* Three rows with min and max sizes */
}
7. Grid Template Areas (Advanced Usage)
You can combine grid-template-rows with grid-template-areas for more complex layouts. Define the row sizes and then specify how items are placed in these rows using named areas.
.container {
display: grid;
grid-template-rows: 100px auto 100px;
grid-template-areas:
"header"
"main"
"footer";
}
Practical Examples
Example 1: Equal Height Rows
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-rows: 1fr 1fr 1fr; /* Three equal-height rows */
grid-gap: 10px; /* Space between grid items */
}
.item {
background-color: lightblue;
border: 1px solid blue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Example 2: Flexible Rows with Minimum and Maximum Sizes
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-rows: repeat(3, minmax(100px, 1fr)); /* Three rows with min and max sizes */
grid-gap: 10px; /* Space between grid items */
}
.item {
background-color: lightcoral;
border: 1px solid red;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>