Tailwind Grid Row

In CSS grid layout, a grid row is a horizontal track in the grid container. Grid rows are used in combination with grid columns to layout items on a 2-dimensional grid system. The grid-template-rows property is used to define the number and size of these rows.

Applying Grid Rows in Tailwind CSS

In Tailwind CSS, you can define the number of grid rows in your grid container using the grid-rows-{n} utility, where {n} is the number of rows.

For example, to create a grid container with three rows, you would use the grid-rows-3 class:

<div class="grid grid-rows-3">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

Preview

In this example, the grid container has three grid items, each occupying one grid row.

Spanning Across Multiple Grid Rows

You can also span an item across multiple grid rows using the row-span-{n} utility, where {n} is the number of rows to span across.

Let's modify the previous example and make the second item span across two rows:

<div class="grid grid-rows-3">
  <div>A</div>
  <div class="row-span-2">B</div>
  <div>C</div>
</div>

Preview

Now, the second item will take up two rows, spanning from the second row to the third row.

Customizing Grid Rows

If the default grid row classes do not meet your needs, Tailwind allows you to extend the default configuration via the tailwind.config.js file. You can add custom grid row configuration like so:

module.exports = {
  theme: {
    extend: {
      gridTemplateRows: {
        'custom': 'repeat(4, minmax(0, 1fr))',
      }
    }
  }
}

In this example, a custom grid row configuration named 'custom' was added, which creates a grid with four rows of equal size. You can use it just like the default classes:

<div class="grid grid-rows-custom">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Tailwind CSS Grid row Class Table