Tailwind CSS grid-template-rows Property

The grid-template-rows property in Tailwind CSS creates a template for grid rows. It specifies the size of each row in the grid by defining a sequence of row height values.

Syntax

Here is the syntax for using the grid-template-rows property in Tailwind CSS:

/* Responsive row height values */
grid-template-rows: {size} | {line-name} {size} | minmax({min}, {max}) | auto | max-content | min-content | fit-content | repeat({n}, {size}) | [create a template]

Example

Let's create a 3 x 3 grid with varying row heights using grid-template-rows in Tailwind CSS.

<div class="grid grid-cols-3 grid-rows-3 grid-flow-row gap-4">
  <div class="bg-red-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-green-500 p-4">3</div>
  <div class="bg-yellow-500 p-4">4</div>
  <div class="bg-indigo-500 p-4">5</div>
  <div class="bg-purple-500 p-4">6</div>
  <div class="bg-pink-500 p-4">7</div>
  <div class="bg-gray-500 p-4">8</div>
  <div class="bg-teal-500 p-4">9</div>
</div>

/* Define row heights */
.grid-flow-row {
  grid-template-rows: 1fr 2fr 1fr;
}

Output

The above code will create a 3 x 3 grid with varying row heights.

Explanation

The grid-template-rows property defines the row heights of a grid. The property accepts a variety of values:

• {size}: Sets a fixed size for a row, where {size} can be specified in px, em, rem, %, etc.

• {line-name} {size}: Assigns a name to a row as a reference point, and sets its size.

• minmax({min}, {max}): Sets a minimum and maximum size for a row.

• auto: Automatically sizes a row based on its content.

• max-content: Sizes a row based on its maximum content size.

• min-content: Sizes a row based on its minimum content size.

• fit-content: Sizes a row based on its available space and largest content size.

• repeat({n}, {size}): Sets {n} rows with a size of {size}.

• [create a template]: A template for specifying the size of multiple rows.

Use

The grid-template-rows property is useful when you want to define a grid's rows with different heights.

Important Points

• As with other Tailwind CSS utilities, you can use responsive variant classes to apply different row heights at different viewport sizes.

• The grid-auto-rows property can be used in conjunction with grid-template-rows to define a default size for rows that are not explicitly sized.

Summary

In Tailwind CSS, the grid-template-rows property creates a template for grid rows. It defines the size of each row in the grid by defining a sequence of row height values. The property accepts a variety of values, from fixed sizes to more adaptive sizing based on content and available space. When combined with the grid-template-columns and grid-gap properties, grid-template-rows makes it easy to craft complex grid layouts.