Defining grid rows in Tailwind - Browser Rendering Trace

Render Flow - Defining grid rows

Read HTML container element

↓

Apply Tailwind class: grid

↓

Create grid container

↓

Apply Tailwind class: grid-rows-{n}

↓

Define number of rows in grid

↓

Place grid items into rows

↓

Calculate row heights

↓

Paint grid and items

↓

Composite final layout

The browser reads the HTML container, applies Tailwind's grid display, then sets the number of rows using the grid-rows-{n} class. It calculates row sizes and places items accordingly before painting the final layout.

Render Steps - 3 Steps

Code Added:display: grid;

Before

[Container]
  [Item 1]
  [Item 2]
  [Item 3]

→

After

[Container: grid]
  [Item 1]
  [Item 2]
  [Item 3]

The container becomes a grid, but no rows are defined yet, so items stack as block elements.

🔧 Browser Action:Creates grid formatting context

Code Sample

A grid container with 3 equal rows and gaps, each row containing one colored item stacked vertically.

Tailwind

<div class="grid grid-rows-3 gap-4">
  <div class="bg-blue-500">Item 1</div>
  <div class="bg-green-500">Item 2</div>
  <div class="bg-red-500">Item 3</div>
</div>

Tailwind

.grid {
  display: grid;
}
.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.gap-4 {
  gap: 1rem;
}
.bg-blue-500 {
  background-color: #3b82f6;
}
.bg-green-500 {
  background-color: #22c55e;
}
.bg-red-500 {
  background-color: #ef4444;
}

Render Quiz - 3 Questions

After applying step 2, how are the grid items arranged?

A All items in one row horizontally

B Stacked vertically in 3 equal rows

C Overlapping each other in one cell

D Hidden from view

Common Confusions - 2 Topics

Why do my grid items not split into rows even after adding grid-rows-3?

If the container does not have display:grid, grid-template-rows has no effect. Step 1 shows display:grid must be set first.

💡 Always set display:grid before defining rows.

Why is there no space between my rows even though I added gap?

Gap only works on grid or flex containers. Step 3 shows gap applied after display:grid and row definitions.

💡 Gap needs a grid or flex container to create space.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	grid	N/A	Creates grid container for layout	Start grid layout
grid-template-rows	repeat(3, minmax(0, 1fr))	Block (vertical)	Defines 3 equal height rows	Split container vertically
gap	1rem	Both	Adds space between grid rows and columns	Separate grid items visually

Concept Snapshot

Defining grid rows uses display:grid to create a grid container. Use grid-template-rows (e.g., grid-rows-3) to set number of rows. Rows split container vertically into equal parts by default. Add gap to create space between rows. Without display:grid, row definitions have no effect.

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