Tailwind CSS - Grid Template Rows

Defining Grid Rows with Tailwind CSS

CSS Grid is a powerful 2D layout system. The grid-template-rows property is a fundamental part of it, allowing you to explicitly define the number and height of rows in a grid container. Tailwind CSS provides a comprehensive set of utilities to control this property with ease.

Grid Template Rows Classes

You can create a grid with a specific number of equal-width rows, disable explicit row definition, or create a subgrid that inherits its parent’s row tracks.

Class	CSS Properties
grid-rows-1	grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-6	grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-12	grid-template-rows: repeat(12, minmax(0, 1fr));
grid-rows-none	grid-template-rows: none;
grid-rows-subgrid	grid-template-rows: subgrid;
grid-rows-[auto_1fr_auto]	grid-template-rows: auto 1fr auto; (Arbitrary value)

Example 1: Simple Row Layout

Use the grid-rows-{n} utilities to create a grid with a specific number of equally sized rows. This is useful for simple, uniform layouts.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Rows Example</title>
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-100 p-8">
  <h2 class="text-xl font-bold mb-4">3-Row Grid with 2 Columns</h2>
  <div class="grid grid-rows-3 grid-cols-2 gap-4 h-48">
    <div class="bg-sky-500 rounded-lg flex items-center justify-center text-white font-bold">1</div>
    <div class="bg-sky-500 rounded-lg flex items-center justify-center text-white font-bold">2</div>
    <div class="bg-pink-500 rounded-lg flex items-center justify-center text-white font-bold">3</div>
    <div class="bg-pink-500 rounded-lg flex items-center justify-center text-white font-bold">4</div>
    <div class="bg-amber-500 rounded-lg flex items-center justify-center text-white font-bold">5</div>
    <div class="bg-amber-500 rounded-lg flex items-center justify-center text-white font-bold">6</div>
  </div>
</body>
</html>

Example 2: Creating a Sticky Footer Layout

A highly practical use case for explicit rows is creating a sticky footer. By using grid-rows-[auto_1fr_auto], we define a three-row grid: a header that takes its content’s height, a main content area that takes all remaining available space (1fr), and a footer that takes its content’s height. This ensures the footer sticks to the bottom of the viewport, even on pages with little content.

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Footer Layout</title>
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="grid grid-rows-[auto_1fr_auto] min-h-screen bg-slate-200 text-slate-800">
  <header class="bg-white shadow p-4">
    <p class="font-bold">My Website</p>
  </header>

  <main class="p-8">
    <h1 class="text-2xl font-bold">Page Content</h1>
    <p>This is the main content area. It will expand to fill the available space.</p>
  </main>

  <footer class="bg-slate-800 text-white p-4 text-center">
    <p>&copy; 2024 My Company</p>
  </footer>
</body>
</html>

Using Subgrid for Aligned Nested Grids

Use grid-rows-subgrid on a grid item to make it adopt its parent’s row tracks. This is powerful for creating complex layouts where nested elements need to align perfectly with the main grid structure. Note: subgrid is a modern CSS feature and may not be supported in all browsers. Check caniuse.com for current support.

Best Practices and Pro Tips

• Implicit vs. Explicit Rows: When you have more grid items than explicitly defined rows, the grid will create implicit rows. You can control their height with the auto-rows-* utilities (e.g., auto-rows-fr).
• Combine with Columns: grid-rows-* works in tandem with grid-cols-* to define the full grid structure.
• Use Browser DevTools: The best way to understand and debug a CSS Grid layout is to use your browser’s developer tools. They provide a visual overlay that shows the grid lines, gaps, and tracks, making it easy to see how your layout is constructed.