Tailwind CSS - Grid Row Start / End

Mastering Grid Rows in Tailwind CSS

In CSS Grid Layout, positioning items along rows is a fundamental concept. Tailwind CSS provides a comprehensive set of utility classes to control how an element spans across grid rows or where it starts and ends. These utilities are essential for creating complex, responsive, and well-organized layouts.

Controlling Row Span and Position

Use the row-span-*, row-start-*, and row-end-* utilities to manage the vertical placement and size of grid items. Below is a list of the core classes available in Tailwind CSS v3+.

Class	CSS Properties
row-auto	grid-row: auto;
row-span-1	grid-row: span 1 / span 1;
row-span-2	grid-row: span 2 / span 2;
row-span-3	grid-row: span 3 / span 3;
row-span-4	grid-row: span 4 / span 4;
row-span-5	grid-row: span 5 / span 5;
row-span-6	grid-row: span 6 / span 6;
row-span-7	grid-row: span 7 / span 7;
row-span-8	grid-row: span 8 / span 8;
row-span-9	grid-row: span 9 / span 9;
row-span-10	grid-row: span 10 / span 10;
row-span-11	grid-row: span 11 / span 11;
row-span-12	grid-row: span 12 / span 12;
row-span-full	grid-row: 1 / -1;
row-start-1	grid-row-start: 1;
row-start-2	grid-row-start: 2;
row-start-3	grid-row-start: 3;
row-start-4	grid-row-start: 4;
row-start-5	grid-row-start: 5;
row-start-6	grid-row-start: 6;
row-start-7	grid-row-start: 7;
row-start-8	grid-row-start: 8;
row-start-9	grid-row-start: 9;
row-start-10	grid-row-start: 10;
row-start-11	grid-row-start: 11;
row-start-12	grid-row-start: 12;
row-start-13	grid-row-start: 13;
row-start-auto	grid-row-start: auto;
row-end-1	grid-row-end: 1;
row-end-2	grid-row-end: 2;
row-end-3	grid-row-end: 3;
row-end-4	grid-row-end: 4;
row-end-5	grid-row-end: 5;
row-end-6	grid-row-end: 6;
row-end-7	grid-row-end: 7;
row-end-8	grid-row-end: 8;
row-end-9	grid-row-end: 9;
row-end-10	grid-row-end: 10;
row-end-11	grid-row-end: 11;
row-end-12	grid-row-end: 12;
row-end-13	grid-row-end: 13;
row-end-auto	grid-row-end: auto;

Core Concepts: How Grid Rows Work

• Spanning Rows (row-span-*): This is the most common utility. It makes an element occupy a specific number of grid rows. Think of it like merging cells in a spreadsheet. row-span-3 means the item will take up the space of three rows.
• Full Span (row-span-full): A powerful shortcut that makes an item span all available rows in the grid. This is perfect for sidebars or background elements in a specific grid context.
• Explicit Placement (row-start-* / row-end-*): These utilities give you precise control by defining the exact starting and ending grid lines for an item. An item with row-start-2 will begin on the second horizontal grid line. Combining row-start-2 and row-end-5 makes an item span from line 2 to line 5 (covering 3 rows).
• Responsive Control: All these utilities can be made responsive by adding prefixes like md: or lg:. For example, row-span-1 md:row-span-2 will make an item span one row on small screens and two rows on medium screens and larger.

Modern Development Workflow

While the examples below use the Tailwind Play CDN for simplicity, modern projects should be built using a toolchain like Vite or Next.js with Node.js. This enables powerful features like the JIT (Just-In-Time) compiler, which scans your files and generates only the CSS you actually use, resulting in tiny production files.

Quick Setup with Vite:

# 1. Create a new Vite project
npm create vite@latest my-tailwind-project -- --template react
cd my-tailwind-project

# 2. Install Tailwind CSS dependencies
npm install -D tailwindcss postcss autoprefixer

# 3. Initialize Tailwind CSS
npx tailwindcss init -p

# 4. Configure template paths in tailwind.config.js
# This tells Tailwind where to look for class names
# content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"]

# 5. Add Tailwind directives to your main CSS file
# @tailwind base;
# @tailwind components;
# @tailwind utilities;

# 6. Run the development server
npm run dev

Practical Examples

Example 1: Dashboard Widget Layout

This example demonstrates how row-span-* can create a dashboard-like layout where one widget is twice as tall as the others.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Dashboard Widget Layout</title>
</head>
<body class="bg-slate-100 p-8">
  <h2 class="text-2xl font-bold text-slate-800 mb-4">Team Dashboard</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 grid-rows-2 gap-6">
    <!-- This item spans two rows -->
    <div class="md:row-span-2 bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold text-slate-900">Active Projects</h3>
      <p class="text-slate-500 mt-2 text-sm">This card is taller and spans two rows on medium screens and up.</p>
    </div>
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold text-slate-900">Revenue (30d)</h3>
      <p class="text-slate-500 mt-2 text-3xl font-bold">$15,230</p>
    </div>
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold text-slate-900">New Users</h3>
       <p class="text-slate-500 mt-2 text-3xl font-bold">128</p>
    </div>
    <div class="col-span-1 md:col-span-2 bg-white rounded-xl shadow-lg p-6">
        <h3 class="font-semibold text-slate-900">Recent Activity</h3>
        <p class="text-slate-500 mt-2 text-sm">This item fills the remaining space.</p>
    </div>
  </div>
</body>
</html>

Example 2: Weekly Schedule with Explicit Placement

Here, we use row-start-* and col-start-* to precisely place events on a calendar grid. Notice how “Team Workshop” is placed to span multiple rows.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Weekly Schedule</title>
</head>
<body class="bg-gray-100 p-8">
  <div class="grid grid-cols-6 grid-rows-7 gap-1 bg-gray-200 p-1 rounded-lg">
    <!-- Grid with 6 columns (Time + 5 weekdays) and 7 rows (9am to 3pm) -->
    <!-- Headers -->
    <div class="col-start-2 font-semibold text-center py-2">Mon</div>
    <div class="font-semibold text-center py-2">Tue</div>
    <div class="font-semibold text-center py-2">Wed</div>
    <div class="font-semibold text-center py-2">Thu</div>
    <div class="font-semibold text-center py-2">Fri</div>

    <!-- Event 1 -->
    <div class="col-start-2 row-start-2 row-span-2 bg-sky-500 text-white p-2 rounded-md text-xs">
      **Project Kick-off**<br>10:00 AM - 12:00 PM
    </div>

    <!-- Event 2: Explicit Start and End -->
    <div class="col-start-4 row-start-3 row-end-6 bg-amber-500 text-white p-2 rounded-md text-xs">
      **Team Workshop**<br>11:00 AM - 2:00 PM
    </div>

    <!-- Event 3 -->
    <div class="col-start-6 row-start-5 bg-indigo-500 text-white p-2 rounded-md text-xs">
      **Design Review**<br>1:00 PM - 2:00 PM
    </div>
  </div>
</body>
</html>