Grid Auto Rows

Sets the size of implicitly created rows in a CSS Grid. Similar to grid-auto-columns, this utility controls the sizing of automatically generated rows that aren't explicitly defined with grid-template-rows. This is essential for grids with dynamic content where the number of rows isn't known in advance or when using grid-auto-flow: row.

Flexbox & Grid1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="grid grid-cols-3 auto-rows-auto gap-4 p-4 bg-gray-100 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">Auto-sized row</div>
  <div class="bg-blue-200 p-8 rounded">Taller content</div>
  <div class="bg-blue-300 p-4 rounded">Auto-sized row</div>
  <div class="bg-blue-100 p-4 rounded">Next row</div>
  <div class="bg-blue-200 p-4 rounded">Next row</div>
  <div class="bg-blue-300 p-4 rounded">Next row</div>
</div>

Examples

Auto rows sized based on their content

<div class="grid grid-cols-3 auto-rows-auto gap-4 p-4 bg-gray-100 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">Auto-sized row</div>
  <div class="bg-blue-200 p-8 rounded">Taller content</div>
  <div class="bg-blue-300 p-4 rounded">Auto-sized row</div>
  <div class="bg-blue-100 p-4 rounded">Next row</div>
  <div class="bg-blue-200 p-4 rounded">Next row</div>
  <div class="bg-blue-300 p-4 rounded">Next row</div>
</div>

Edit in playground

Fixed height auto rows

<div class="grid grid-cols-3 auto-rows-[100px] gap-4 p-4 bg-gray-100 rounded-lg">
  <div class="bg-green-100 p-4 rounded">Fixed height</div>
  <div class="bg-green-200 p-4 rounded overflow-auto">Scrolling if content exceeds 100px height</div>
  <div class="bg-green-300 p-4 rounded">Fixed height</div>
  <div class="bg-green-100 p-4 rounded">Fixed height</div>
  <div class="bg-green-200 p-4 rounded">Fixed height</div>
  <div class="bg-green-300 p-4 rounded">Fixed height</div>
</div>

Edit in playground

Grid with minimum row height that expands for content

<!-- Dynamic content grid with minimum row height -->
<div class="grid grid-cols-2 md:grid-cols-3 auto-rows-[minmax(100px,auto)] gap-4 p-4 bg-gray-100 rounded-lg">
  <div class="bg-white p-4 rounded-lg shadow-md">
    <h3 class="font-bold mb-2">Card 1</h3>
    <p>Each row is at least 100px tall, but will expand if the content requires more space.</p>
  </div>
  <div class="bg-white p-4 rounded-lg shadow-md">
    <h3 class="font-bold mb-2">Card 2</h3>
    <p>Short content</p>
  </div>
  <div class="bg-white p-4 rounded-lg shadow-md">
    <h3 class="font-bold mb-2">Card 3</h3>
    <p>This creates a balanced grid with consistent minimum heights but flexible when needed.</p>
    <p class="mt-2">Additional content that makes this card taller will cause the entire row to expand.</p>
  </div>
  <div class="bg-white p-4 rounded-lg shadow-md">
    <h3 class="font-bold mb-2">Card 4</h3>
    <p>Short content</p>
  </div>
  <div class="bg-white p-4 rounded-lg shadow-md">
    <h3 class="font-bold mb-2">Card 5</h3>
    <p>Each card in the same row will match the height of the tallest card.</p>
  </div>
</div>

Edit in playground

Masonry-inspired layout with row spans and fixed unit size

<!-- Masonry-style layout with auto rows -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 auto-rows-[50px] gap-4 p-4 bg-gray-100 rounded-lg">
  <div class="row-span-2 bg-blue-100 p-4 rounded-lg">Height: 2 units</div>
  <div class="row-span-3 bg-blue-200 p-4 rounded-lg">Height: 3 units</div>
  <div class="row-span-1 bg-blue-300 p-4 rounded-lg">Height: 1 unit</div>
  <div class="row-span-4 bg-blue-400 p-4 rounded-lg">Height: 4 units</div>
  <div class="row-span-2 bg-blue-500 p-4 rounded-lg">Height: 2 units</div>
  <div class="row-span-3 bg-blue-600 p-4 rounded-lg text-white">Height: 3 units</div>
  <div class="row-span-2 bg-blue-700 p-4 rounded-lg text-white">Height: 2 units</div>
  <div class="row-span-1 bg-blue-800 p-4 rounded-lg text-white">Height: 1 unit</div>
  <div class="row-span-3 bg-blue-900 p-4 rounded-lg text-white">Height: 3 units</div>
</div>

Edit in playground

Live Preview

Try the Grid Auto Rows utility with different values

Open Interactive Playground

Variants

auto-rows-auto: size based on content; auto-rows-min: minimum size to fit content (min-content); auto-rows-max: maximum size to fit content (max-content); auto-rows-fr: equal fraction of available space (1fr); also supports arbitrary values with auto-rows-[100px] or complex values like auto-rows-[minmax(100px,auto)]

autominmaxfr