What is Defining grid rows in Tailwind?

Tailwindmarkup~5 mins

Defining grid rows in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Defining grid rows helps you organize content vertically in a neat and flexible way. It makes your webpage look clean and easy to read.

You want to stack items in rows with equal height.

You need to create a layout with multiple horizontal sections.

You want to control how tall each row is on different screen sizes.

You want to make a photo gallery with rows of images.

You want to build a form with fields arranged in rows.

Syntax

Tailwind

grid-rows-{n}
grid-rows-{size}

Examples:
grid-rows-3
grid-rows-none

You can also use custom sizes with square brackets:
grid-rows-[100px_200px_auto]

grid-rows-{n} sets the number of equal rows.

You can use grid-rows-none to remove row settings.

Examples

This creates a grid with 3 equal rows and some space between them.

Tailwind

<div class="grid grid-rows-3 gap-2">
  <div class="bg-blue-300">Row 1</div>
  <div class="bg-blue-500">Row 2</div>
  <div class="bg-blue-700">Row 3</div>
</div>

This sets custom heights for each row using square brackets.

Tailwind

<div class="grid grid-rows-[100px_200px_auto] gap-2">
  <div class="bg-green-300">100px tall row</div>
  <div class="bg-green-500">200px tall row</div>
  <div class="bg-green-700">Auto height row</div>
</div>

This removes any grid row settings, so rows size naturally.

Tailwind

<div class="grid grid-rows-none">
  <div class="bg-red-300">No row definition</div>
  <div class="bg-red-500">Rows behave normally</div>
</div>

Sample Program

This example shows a grid container with 3 equal rows. Each row has a different shade of indigo and centered text.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tailwind Grid Rows Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-bold mb-4">Grid with 3 Rows</h1>
  <div class="grid grid-rows-3 gap-4 border border-gray-400 p-4">
    <div class="bg-indigo-300 flex items-center justify-center">Row 1</div>
    <div class="bg-indigo-500 flex items-center justify-center">Row 2</div>
    <div class="bg-indigo-700 flex items-center justify-center text-white">Row 3</div>
  </div>
</body>
</html>

OutputSuccess

Important Notes

Use gap-* classes to add space between rows.

Custom row sizes inside square brackets must separate sizes with underscores (_), not spaces.

Grid rows work best inside a container with grid class.

Summary

Use grid-rows-{n} to create equal height rows.

Use square brackets for custom row heights like grid-rows-[100px_200px_auto].

Combine with grid and gap classes for neat layouts.