Grid Template Rows

Defines the rows in a CSS Grid layout, allowing you to control the vertical tracks in your grid. While grid-template-columns handles the horizontal structure, grid-template-rows governs the height of each row. This is essential for creating well-defined grid layouts where you need control over both dimensions. In Tailwind v4, row utilities have improved compatibility with container queries and logical properties.

Flexbox & Grid1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="grid grid-rows-3 grid-flow-col gap-4 h-48">
  <div class="bg-blue-100 p-4">Row 1, Col 1</div>
  <div class="bg-blue-200 p-4">Row 2, Col 1</div>
  <div class="bg-blue-300 p-4">Row 3, Col 1</div>
  <div class="bg-green-100 p-4">Row 1, Col 2</div>
  <div class="bg-green-200 p-4">Row 2, Col 2</div>
  <div class="bg-green-300 p-4">Row 3, Col 2</div>
</div>

Examples

Basic 3-row grid with columns flowing automatically

<div class="grid grid-rows-3 grid-flow-col gap-4 h-48">
  <div class="bg-blue-100 p-4">Row 1, Col 1</div>
  <div class="bg-blue-200 p-4">Row 2, Col 1</div>
  <div class="bg-blue-300 p-4">Row 3, Col 1</div>
  <div class="bg-green-100 p-4">Row 1, Col 2</div>
  <div class="bg-green-200 p-4">Row 2, Col 2</div>
  <div class="bg-green-300 p-4">Row 3, Col 2</div>
</div>

Edit in playground

Mixed row heights with fixed, flexible, and auto values

<div class="grid grid-rows-[200px_1fr_auto] gap-4 h-96 bg-gray-100 p-4 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">Fixed height (200px)</div>
  <div class="bg-blue-200 p-4 rounded">Flexible height (1fr)</div>
  <div class="bg-blue-300 p-4 rounded">Auto height based on content</div>
</div>

Edit in playground

Full-page app layout with header, scrollable content, and footer

<!-- App layout with header, content, and footer -->
<div class="grid grid-rows-[auto_1fr_auto] h-screen">
  <!-- Header with fixed height based on content -->
  <header class="bg-blue-600 text-white p-4">
    <h1 class="text-xl font-bold">Application Title</h1>
  </header>
  
  <!-- Main content area that takes remaining space -->
  <main class="overflow-auto p-6">
    <div class="max-w-4xl mx-auto">
      <h2 class="text-2xl font-bold mb-4">Main Content</h2>
      <p class="mb-4">This area will grow to fill the available vertical space, pushing the footer to the bottom.</p>
      <p class="mb-4">The grid-rows-[auto_1fr_auto] creates a layout with:</p>
      <ul class="list-disc pl-6 space-y-2 mb-4">
        <li>Header: height based on its content (auto)</li>
        <li>Main: takes all remaining space (1fr)</li>
        <li>Footer: height based on its content (auto)</li>
      </ul>
      
      <p>This produces a classic "sticky footer" layout without needing flexbox.</p>
      
      <!-- Add more content to demonstrate scrolling -->
      <div class="h-96 mt-8 bg-gray-100 rounded-lg flex items-center justify-center">
        <p>Scroll area to show overflow behavior</p>
      </div>
    </div>
  </main>
  
  <!-- Footer with fixed height based on content -->
  <footer class="bg-gray-200 p-4 text-center">
    <p>&copy; 2025 Example Company</p>
  </footer>
</div>

Edit in playground

Complex dashboard layout combining row and column templates

<!-- Dashboard layout with grid rows and columns -->
<div class="grid grid-rows-[auto_1fr_auto] grid-cols-12 min-h-screen gap-4 p-4">
  <!-- Header spanning all columns -->
  <header class="col-span-12 bg-blue-600 text-white p-4 rounded-lg">
    <div class="flex justify-between items-center">
      <h1 class="text-xl font-bold">Dashboard</h1>
      <div>
        <button class="px-4 py-2 bg-blue-700 rounded hover:bg-blue-800">Sign Out</button>
      </div>
    </div>
  </header>
  
  <!-- Sidebar spanning full height of middle row -->
  <aside class="col-span-12 md:col-span-3 row-span-1 bg-gray-100 p-4 rounded-lg overflow-auto">
    <nav class="space-y-2">
      <a href="#" class="block p-2 bg-blue-500 text-white rounded">Dashboard</a>
      <a href="#" class="block p-2 hover:bg-gray-200 rounded">Analytics</a>
      <a href="#" class="block p-2 hover:bg-gray-200 rounded">Reports</a>
      <a href="#" class="block p-2 hover:bg-gray-200 rounded">Users</a>
      <a href="#" class="block p-2 hover:bg-gray-200 rounded">Settings</a>
    </nav>
  </aside>
  
  <!-- Main content area -->
  <main class="col-span-12 md:col-span-9 row-span-1 overflow-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 h-full">
      <!-- Dashboard widgets -->
      <div class="bg-white p-4 rounded-lg shadow-md">Widget 1</div>
      <div class="bg-white p-4 rounded-lg shadow-md">Widget 2</div>
      <div class="bg-white p-4 rounded-lg shadow-md">Widget 3</div>
      <div class="bg-white p-4 rounded-lg shadow-md">Widget 4</div>
      <div class="bg-white p-4 rounded-lg shadow-md">Widget 5</div>
      <div class="bg-white p-4 rounded-lg shadow-md">Widget 6</div>
    </div>
  </main>
  
  <!-- Footer spanning all columns -->
  <footer class="col-span-12 bg-gray-200 p-4 rounded-lg text-center">
    <p>Footer content</p>
  </footer>
</div>

Edit in playground

Live Preview

Try the Grid Template Rows utility with different values

Open Interactive Playground

Variants

Specifies the number of rows in the grid. grid-rows-3 creates three equal-height rows. grid-rows-none removes explicitly defined rows. You can also use arbitrary values with grid-rows-[200px_1fr_auto] for custom row patterns.

123456none