CSS Grid Properties - Grid-auto-rows with Practical examples

Property details - grid-auto-rows

The grid-auto-rows property in CSS is used in a grid container to set the size of implicit rows (rows that are created by the grid but not explicitly defined using the grid-template-rows property). The minmax() function allows you to define a size range for the rows.

Let’s break down grid-auto-rows: minmax(100px, auto):

minmax(100px, auto): This function sets a size range for the rows. It specifies that the minimum size of the row is 100px, and the maximum size is set to auto, meaning the row can grow to accommodate its content.

Now, let’s see an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
      grid-auto-rows: minmax(100px, auto);
    }

    .grid-item {
      background-color: #3498db;
      color: #fff;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>

<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>

</body>
</html>

Output:

Screenshot-2023-11-13-195813 In this example:

The .grid-container is a grid container with three columns (grid-template-columns: repeat(3, 1fr)) and a grid gap of 10px. The .grid-auto-rows: minmax(100px, auto) sets the minimum row height to 100px and allows the rows to expand as needed (auto). The items inside the grid will adjust their size based on the content, and if the content is larger than 100px, the row will expand accordingly. This is especially useful when you want rows to be a minimum height but still be able to grow based on content.

Previous
CSS Grid Properties - Gap, Grid Column Gap, Grid Template Columns