Tailwind CSS Grid Auto Rows

The grid-auto-rows property in Tailwind CSS allows you to define the minimum height of rows in a grid. It is a part of the Grid module in Tailwind CSS.

Syntax

Here's the syntax for using the grid-auto-rows property in Tailwind CSS:

/* Set the minimum height of all rows in the grid */
.grid-auto-rows-{size}

/* Set the minimum height of rows in specific grid lines */
.grid-rows-{line}-{size}

• {size}: Specifies the minimum height of rows, which can be a length value or a sizing keyword (auto, min-content, max-content, auto-fit, auto-fill).
• {line}: Specifies the grid lines to apply the changes, which can be a line number (1, 2, 3...) or a line name (header, footer, sidebar, content, etc.).

Example

Here's an example of using grid-auto-rows to set the height of rows in a grid:

<div class="grid grid-cols-3 grid-rows-3 grid-auto-rows-32px">
  <div class="bg-red-500"></div>
  <div class="bg-green-500"></div>
  <div class="bg-blue-500"></div>
  <div class="bg-yellow-500"></div>
  <div class="bg-pink-500"></div>
  <div class="bg-purple-500"></div>
  <div class="bg-indigo-500"></div>
  <div class="bg-gray-500"></div>
  <div class="bg-black"></div>
</div>

In the example above, we have created a 3x3 grid with a minimum row height of 32px using the grid-auto-rows-32px class.

Output

The above example will produce a 3x3 grid with each row having a minimum height of 32 pixels.

Explanation

The grid-auto-rows property sets the minimum height of rows in a grid. In the example, we have set the minimum height of rows to 32px using the grid-auto-rows-32px class. This means that all rows in the grid will be at least 32px high.

Use

You can use the grid-auto-rows property to set the minimum height of rows in a grid. This is useful when you want to make sure that all rows in the grid are of the same height.

Important Points

• The grid-auto-rows property sets the minimum height of rows in a grid.
• The grid-rows-{line}-{size} can also be used to set the height of specific rows in a grid.
• The {size} value can be a length value or a sizing keyword like auto, min-content, max-content, auto-fit, or auto-fill.
• The grid-auto-rows property only sets the minimum height of rows. If the content in a row is taller than the specified height, the row will stretch to accommodate the content.
• The grid-auto-rows property only works on grid containers (i.e. elements with display: grid or display: inline-grid).

Summary

The grid-auto-rows property sets the minimum height of rows in a grid. You can use this property to ensure that all rows in the grid are of the same height. The minimum height can be set using a length value or a sizing keyword. The grid-auto-rows property only sets the minimum height of rows and does not affect the height of rows that already have content taller than the specified height.