Defining grid rows in Tailwind

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>

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.

Practice

1. What does the Tailwind class grid-rows-3 do in a grid container?

easy

A. It creates 3 rows of equal height in the grid.

B. It creates 3 columns of equal width in the grid.

C. It sets the grid gap to 3 units.

D. It adds 3 pixels of padding to each grid item.

Solution

1. Step 1: Understand the class name

   The class grid-rows-3 specifies the number of rows in the grid layout.

2. Step 2: Effect on grid layout

   This class creates 3 rows of equal height automatically in the grid container.

3. Final Answer:

   It creates 3 rows of equal height in the grid. -> Option A

4. Quick Check:

   grid-rows-3 = 3 equal rows [OK]

Hint: grid-rows-{n} means n equal height rows [OK]

Common Mistakes:

• Confusing rows with columns
• Thinking it sets gaps or padding
• Assuming it sets custom heights

2. Which of these is the correct Tailwind syntax to define a grid with 4 rows?

easy

A. grid-rows4

B. grid-row-4

C. grid-rows-4

D. rows-grid-4

Solution

1. Step 1: Recall Tailwind grid row syntax

   The correct syntax uses grid-rows-{number} to define rows.

2. Step 2: Match options with syntax

   Only grid-rows-4 matches the correct pattern for 4 rows.

3. Final Answer:

   grid-rows-4 -> Option C

4. Quick Check:

   Correct syntax = grid-rows-{n} [OK]

Hint: Use grid-rows-{number} exactly for rows [OK]

Common Mistakes:

• Swapping 'row' and 'rows'
• Missing hyphens
• Incorrect word order

3. What will be the height of the rows in this Tailwind grid?

<div class="grid grid-rows-[100px_200px_auto] gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

medium

A. Three rows with heights 200px, 100px, and automatic height.

B. Three rows all with equal height automatically.

C. Three rows with heights 100px, 100px, and 100px.

D. Three rows with heights 100px, 200px, and automatic height.

Solution

1. Step 1: Understand custom row heights syntax

   The class grid-rows-[100px_200px_auto] sets explicit heights for each row in order.

2. Step 2: Match heights to rows

   The first row is 100px, second is 200px, third is automatic height based on content.

3. Final Answer:

   Three rows with heights 100px, 200px, and automatic height. -> Option D

4. Quick Check:

   Custom grid-rows-[...] sets exact heights [OK]

Hint: Square brackets set exact row heights in order [OK]

Common Mistakes:

• Assuming all rows are equal height
• Mixing order of heights
• Confusing auto with fixed sizes

4. Identify the error in this Tailwind grid row definition:

<div class="grid grid-rows-[100px 200px auto]">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

medium

A. Missing underscores between row heights inside brackets.

B. Using square brackets is not allowed in Tailwind.

C. The grid class is missing.

D. The gap class is required with grid-rows.

Solution

1. Step 1: Check custom row heights syntax

   Custom heights inside square brackets must use underscores (_) to separate values, not spaces.

2. Step 2: Identify the error

   The code uses spaces instead of underscores between 100px, 200px, and auto, causing invalid syntax.

3. Final Answer:

   Missing underscores between row heights inside brackets. -> Option A

4. Quick Check:

   Use underscores in grid-rows-[...] [OK]

Hint: Use underscores, not spaces, inside square brackets [OK]

Common Mistakes:

• Using spaces instead of underscores
• Forgetting to add grid class
• Thinking gap is mandatory

5. You want a grid with 3 rows where the first row is 150px tall, the second row is twice as tall as the first, and the third row fills the remaining space. Which Tailwind class correctly defines these rows?

hard

A. grid-rows-[150px_150px_1fr]

B. grid-rows-[150px_300px_1fr]

C. grid-rows-[150px_2fr_auto]

D. grid-rows-[150px_300px_auto]

Solution

1. Step 1: Translate requirements to CSS grid units

   The first row is 150px, the second row twice that is 300px, and the third fills remaining space using fractional unit.

2. Step 2: Match Tailwind syntax

   Tailwind allows custom row heights with grid-rows-[...] using underscores. The third row uses 1fr to fill leftover space.

3. Step 3: Check options

   grid-rows-[150px_300px_1fr] matches exactly: 150px_300px_1fr. grid-rows-[150px_300px_auto] uses auto which doesn't fill remaining space. grid-rows-[150px_2fr_auto] uses 2fr incorrectly for second row. grid-rows-[150px_150px_1fr] has equal second row height.

4. Final Answer:

   grid-rows-[150px_300px_1fr] -> Option B

5. Quick Check:

   Use fixed px and fr units for flexible rows [OK]

Hint: Use px for fixed, fr for flexible row heights [OK]

Common Mistakes:

• Using auto instead of fr for flexible space
• Wrong units for double height
• Mixing fr and px incorrectly