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.