Grid Row Start / End

Controls how an element spans across rows in a CSS Grid. Similar to grid-column utilities, grid-row-start and grid-row-end (or the shorthand grid-row) let you position items vertically within a grid. This allows for precise placement and spanning across multiple rows. When combined with responsive variants, you gain powerful control over complex layouts that adapt to different screen sizes.

Flexbox & Grid1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="grid grid-rows-3 grid-cols-3 gap-4 h-64">
  <div class="row-span-2 bg-blue-300 p-4">Spans 2 rows</div>
  <div class="bg-blue-100 p-4">1 row, 1 column</div>
  <div class="bg-blue-100 p-4">1 row, 1 column</div>
  <div class="row-span-3 bg-green-300 p-4">Spans all 3 rows</div>
  <div class="bg-blue-100 p-4">1 row, 1 column</div>
  <div class="bg-blue-100 p-4">1 row, 1 column</div>
  <div class="bg-blue-100 p-4">1 row, 1 column</div>
</div>

Examples

Basic example of items spanning multiple rows

<div class="grid grid-rows-3 grid-cols-3 gap-4 h-64">
  <div class="row-span-2 bg-blue-300 p-4">Spans 2 rows</div>
  <div class="bg-blue-100 p-4">1 row, 1 column</div>
  <div class="bg-blue-100 p-4">1 row, 1 column</div>
  <div class="row-span-3 bg-green-300 p-4">Spans all 3 rows</div>
  <div class="bg-blue-100 p-4">1 row, 1 column</div>
  <div class="bg-blue-100 p-4">1 row, 1 column</div>
  <div class="bg-blue-100 p-4">1 row, 1 column</div>
</div>

Edit in playground

Explicit positioning using start and end row lines

<div class="grid grid-rows-5 grid-cols-4 gap-4 h-80">
  <div class="row-start-2 row-span-3 col-span-2 bg-purple-200 p-4">
    Starts at row 2, spans 3 rows
  </div>
  <div class="row-start-1 row-end-3 col-start-3 col-end-5 bg-purple-300 p-4">
    From row 1 to 3, columns 3-5
  </div>
  <div class="row-start-3 row-end-6 col-start-3 col-end-5 bg-purple-400 p-4">
    From row 3 to 6, columns 3-5
  </div>
</div>

Edit in playground

Dashboard layout with complex row and column positioning

<!-- Complex grid layout with mixed row and column spans -->
<div class="grid grid-cols-4 grid-rows-4 gap-4 h-96 p-4 bg-gray-100 rounded-lg">
  <!-- Header area -->
  <div class="col-span-4 row-span-1 bg-blue-500 text-white p-4 rounded-lg flex items-center">
    <h1 class="text-xl font-bold">Grid Dashboard</h1>
  </div>
  
  <!-- Main content area -->
  <div class="col-span-2 row-span-2 bg-white p-4 rounded-lg shadow-md overflow-auto">
    <h2 class="font-bold mb-2">Main Content</h2>
    <p>This area spans 2 columns and 2 rows, creating a large content section.</p>
    <div class="mt-4 h-20 bg-blue-50 rounded p-3">Additional content area</div>
  </div>
  
  <!-- Right sidebar spanning 3 rows -->
  <div class="col-span-2 row-span-3 col-start-3 row-start-2 bg-blue-100 p-4 rounded-lg">
    <h2 class="font-bold mb-2">Analytics</h2>
    <div class="space-y-4">
      <div class="h-20 bg-white rounded-lg p-3 shadow-sm">Chart 1</div>
      <div class="h-20 bg-white rounded-lg p-3 shadow-sm">Chart 2</div>
      <div class="h-20 bg-white rounded-lg p-3 shadow-sm">Chart 3</div>
    </div>
  </div>
  
  <!-- Bottom widgets -->
  <div class="col-span-1 row-span-1 bg-green-100 p-4 rounded-lg">
    <h3 class="font-bold text-sm">Widget A</h3>
  </div>
  
  <div class="col-span-1 row-span-1 bg-green-100 p-4 rounded-lg">
    <h3 class="font-bold text-sm">Widget B</h3>
  </div>
  
  <!-- Footer -->
  <div class="col-span-4 row-span-1 bg-gray-200 p-3 rounded-lg flex items-center justify-center">
    <p class="text-sm text-gray-600">Footer</p>
  </div>
</div>

Edit in playground

Responsive layout with different row spans at different breakpoints

<!-- Responsive layout that changes row spans based on screen size -->
<div class="grid grid-cols-1 md:grid-cols-3 grid-rows-none md:grid-rows-4 gap-4 p-4 bg-gray-100 rounded-lg min-h-[600px]">
  <div class="bg-white p-4 rounded-lg shadow-md row-span-1 md:row-span-2">
    <h2 class="font-bold mb-2">Section A</h2>
    <p>This section spans 1 row on mobile and 2 rows on desktop.</p>
  </div>
  
  <div class="bg-white p-4 rounded-lg shadow-md row-span-1 md:row-span-4">
    <h2 class="font-bold mb-2">Section B</h2>
    <p>This section spans 1 row on mobile and all 4 rows on desktop.</p>
    <div class="mt-4 space-y-2">
      <div class="h-8 bg-gray-100 rounded"></div>
      <div class="h-8 bg-gray-100 rounded"></div>
      <div class="h-8 bg-gray-100 rounded"></div>
    </div>
  </div>
  
  <div class="bg-white p-4 rounded-lg shadow-md row-span-1 md:row-span-2">
    <h2 class="font-bold mb-2">Section C</h2>
    <p>This section spans 1 row on mobile and 2 rows on desktop.</p>
  </div>
  
  <div class="bg-white p-4 rounded-lg shadow-md md:col-span-2 row-span-1 md:col-start-1 md:row-start-3">
    <h2 class="font-bold mb-2">Section D</h2>
    <p>This section spans 1 row on mobile and desktop, but takes 2 columns on desktop.</p>
  </div>
  
  <div class="bg-white p-4 rounded-lg shadow-md md:col-span-2 row-span-1 md:col-start-1 md:row-start-4">
    <h2 class="font-bold mb-2">Section E</h2>
    <p>This section spans 1 row on mobile and desktop, but takes 2 columns on desktop.</p>
  </div>
</div>

Edit in playground

Live Preview

Try the Grid Row Start / End utility with different values

Open Interactive Playground

Variants

row-span-{number}: spans the specified number of rows; row-span-full: spans all rows; row-start-{number}: starts at the specified row line; row-end-{number}: ends at the specified row line; auto values use grid auto-placement algorithm

autospan-1span-2span-3span-4span-5span-6span-fullstart-1start-2start-3start-4start-5start-6start-7start-autoend-1end-2end-3end-4end-5end-6end-7end-auto