CSS grid-auto-rows Tutorial

CSS grid-auto-rows

The grid-auto-rows property in CSS allows you to set the size of the rows in a grid layout that do not have a specified size. This property is particularly useful when you want to create a grid layout with rows that have dynamic heights based on the content.

Let's see how the grid-auto-rows property works with an example:

Result:
1
2
3
4
5
6

In this example, we have a grid container with 3 columns and we have not specified the size for the rows. The grid-auto-rows property is set to 50px, so any rows that do not have a specified size will be 50 pixels in height.

Let's see the code for the above example:


.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  grid-auto-rows: 50px;
}
.grid-item {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

You can adjust the grid-auto-rows value to set the height for the rows dynamically based on your design requirements.