CSS Grid Layout is a powerful tool for creating complex layouts on the web. It allows developers to create a grid of rows and columns, and then place content within those cells. One of the key features of CSS Grid Layout is the ability to define the size of rows and columns using a variety of different properties. One such property is grid-auto-rows.
Grid-auto-rows is a CSS property that allows developers to define the height of rows in a grid that are not explicitly defined. In other words, if a grid has a set number of rows, but there is more content than can fit within those rows, grid-auto-rows will define the height of any additional rows that are needed to accommodate the content.
Here is an example of how grid-auto-rows works:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 100px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
}
In this example, we have a grid container with three columns and a height of 100 pixels for any rows that are not explicitly defined. We also have a grid item with a background color and padding to demonstrate the size of each cell.
Let's say we have six items that we want to place within this grid. The first three items will fit within the first row, but the remaining three items will need to be placed in a second row. Because we have defined grid-auto-rows as 100 pixels, the second row will also have a height of 100 pixels.
Here is the HTML code for this example:
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
And here is the result:
As you can see, the first row has three items and a height of 100 pixels, and the second row has three items and a height of 100 pixels.
Grid-auto-rows can also be used in conjunction with other grid properties, such as grid-template-rows and grid-template-areas, to create more complex layouts. For example:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-auto-rows: 50px;
grid-template-areas:
"header header header"
"main main sidebar";
}
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
In this example, we have a grid container with three columns and two rows. The first row has a height of 100 pixels, and the second row has a height of 50 pixels (defined by grid-auto-rows). We also have three grid items that are placed within the grid using grid-template-areas.
Here is the HTML code for this example:
<div class="grid-container">
<div class="header">Header</div>
<div class="main">Main Content</div>
<div class="sidebar">Sidebar</div>
</div>
And here is the result:
As you can see, the first row has a height of 100 pixels, and the second row has a height of 50 pixels. The grid items are placed within the grid using grid-template-areas.
Overall, grid-auto-rows is a powerful CSS property that allows developers to create flexible and dynamic grid layouts on the web. By defining the height of rows that are not explicitly defined, developers can ensure that their content is always displayed in a way that is both visually appealing and functional.