Tailwind CSS Academy · Lesson

Grid Rows and Auto Placement

Define explicit rows with grid-rows-*, control auto-placement with grid-flow-*, and let the browser intelligently place items.

Explicit vs Implicit Grid Rows

When you place items in a grid, CSS Grid creates rows in two ways: explicitly (you define them with grid-rows-*) or implicitly (the browser generates them automatically when items overflow). Understanding this distinction helps you control heights precisely when you need it, or let the browser handle it when you have variable content.

<!-- Explicit 3-row grid -->
<div class="grid grid-rows-3 grid-cols-2 gap-4 h-48">
  <div class="bg-blue-100 p-3">Row 1, Col 1</div>
  <div class="bg-blue-100 p-3">Row 1, Col 2</div>
  <div class="bg-blue-200 p-3">Row 2, Col 1</div>
  <div class="bg-blue-200 p-3">Row 2, Col 2</div>
  <div class="bg-blue-300 p-3">Row 3, Col 1</div>
  <div class="bg-blue-300 p-3">Row 3, Col 2</div>
</div>

The grid-rows-N Utilities

Tailwind provides grid-rows-1 through grid-rows-6 to define explicit row tracks. Under the hood, grid-rows-3 compiles to grid-template-rows: repeat(3, minmax(0, 1fr)). These rows share the available height of the container equally. This is most useful when the container has a fixed or percentage-based height.

<!-- 4 equal rows in a fixed-height dashboard -->
<div class="grid grid-rows-4 gap-2 h-64">
  <div class="bg-emerald-100 p-2 rounded">Section 1</div>
  <div class="bg-emerald-200 p-2 rounded">Section 2</div>
  <div class="bg-emerald-300 p-2 rounded">Section 3</div>
  <div class="bg-emerald-400 p-2 rounded">Section 4</div>
</div>

All lessons in this course

← Back to Tailwind CSS Academy