Tailwind CSS Grid — Grid Template Columns, Rows, and Layout

In this tutorial, you will learn about Tailwind CSS ilink "CSS Grid" >}}. We cover key concepts, practical examples, and best practices to help you master this topic.

Tailwind CSS grid utilities provide two-dimensional layout control with classes for grid containers, column and row templates, spanning, gaps, and auto-flow behavior.

What You'll Learn

You will learn how to create grid containers with fixed and responsive column counts, span items across columns and rows, use named grid areas, and control grid auto-flow.

Why It Matters

Grid is the most powerful CSS layout system. DodaTech uses Tailwind grid utilities for dashboard layouts, card galleries, and multi-column content sections with minimal markup.

Real-World Use

Durga Antivirus Pro's dashboard uses a grid-cols-12 layout with col-span-4 for sidebar widgets, col-span-8 for main content, and responsive breakpoints that rearrange on smaller screens.

flowchart LR
    A[Flexbox] --> B[Grid]
    B --> C[Columns]
    B --> D[Rows]
    B --> E[Spans]
    B --> F[Responsive]
    B --> G[Gap]
    style B fill:#38bdf8,stroke:#0284c7,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Grid Column Templates

<div class="grid grid-cols-3 gap-4 p-4">
  <div class="bg-blue-100 p-4 rounded">Column 1</div>
  <div class="bg-blue-200 p-4 rounded">Column 2</div>
  <div class="bg-blue-300 p-4 rounded">Column 3</div>
  <div class="bg-blue-100 p-4 rounded">Column 4</div>
  <div class="bg-blue-200 p-4 rounded">Column 5</div>
  <div class="bg-blue-300 p-4 rounded">Column 6</div>
</div>

Expected output: Six items arranged in a 3-column grid. Items flow to the next row automatically.

Column Spanning

<div class="grid grid-cols-4 gap-4 p-4">
  <div class="col-span-4 bg-purple-100 p-4 rounded text-center font-bold">
    col-span-4 (full width)
  </div>
  <div class="col-span-2 bg-green-100 p-4 rounded">
    col-span-2
  </div>
  <div class="col-span-1 bg-green-200 p-4 rounded">
    col-span-1
  </div>
  <div class="col-span-1 bg-green-300 p-4 rounded">
    col-span-1
  </div>
  <div class="col-span-3 bg-indigo-100 p-4 rounded">
    col-span-3
  </div>
  <div class="col-span-1 bg-indigo-200 p-4 rounded">
    col-span-1
  </div>
</div>

Expected output: A 4-column grid with items spanning different numbers of columns: full width, half width, and quarter width.

Row Spanning

<div class="grid grid-cols-3 gap-4 p-4 auto-rows-fr">
  <div class="bg-pink-100 p-4 rounded row-span-2 flex items-center justify-center text-lg font-bold">
    row-span-2
  </div>
  <div class="bg-pink-200 p-4 rounded">Item A</div>
  <div class="bg-pink-300 p-4 rounded">Item B</div>
  <div class="bg-pink-200 p-4 rounded">Item C</div>
  <div class="bg-pink-300 p-4 rounded">Item D</div>
</div>

Expected output: First item spans 2 rows vertically, pushing adjacent items to fill the remaining space.

Responsive Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 p-4">
  <div class="bg-orange-100 p-6 rounded-lg shadow-sm">
    <h3 class="font-bold text-lg">Card 1</h3>
    <p class="text-gray-600 mt-2">1 column on mobile, 2 on tablet, 4 on desktop.</p>
  </div>
  <div class="bg-orange-200 p-6 rounded-lg shadow-sm">
    <h3 class="font-bold text-lg">Card 2</h3>
    <p class="text-gray-600 mt-2">Responsive grid adapts to viewport.</p>
  </div>
  <div class="bg-orange-100 p-6 rounded-lg shadow-sm">
    <h3 class="font-bold text-lg">Card 3</h3>
    <p class="text-gray-600 mt-2">No media queries needed.</p>
  </div>
  <div class="bg-orange-200 p-6 rounded-lg shadow-sm">
    <h3 class="font-bold text-lg">Card 4</h3>
    <p class="text-gray-600 mt-2">Just responsive prefix classes.</p>
  </div>
</div>

Expected output: Cards display in 1 column on mobile, 2 on tablet, 4 on desktop using responsive grid prefix classes.

Grid Auto-Flow and Dense

<div class="grid grid-cols-3 gap-4 p-4">
  <div class="bg-yellow-100 p-4 rounded col-span-2">Wide item (col-span-2)</div>
  <div class="bg-yellow-200 p-4 rounded">Short</div>
  <div class="bg-yellow-300 p-4 rounded row-span-2 flex items-center">Tall (row-span-2)</div>
  <div class="bg-yellow-100 p-4 rounded">Item</div>
  <div class="bg-yellow-200 p-4 rounded">Item</div>
  <div class="bg-yellow-300 p-4 rounded col-span-2">Another wide item</div>
</div>

Expected output: Items with different spans arrange in the grid, with taller and wider items filling available space.

Common Mistakes

1. Using Grid for One-Dimensional Layout

Grid works for both 1D and 2D layouts, but Flexbox is simpler for single-row or single-column layouts. Use flex for toolbars, navs, and simple rows.

2. Forgetting gap for Spacing

Without gap-*, grid items have no spacing and collide. Always add gap-4 or similar.

3. Over-Specifying Row Templates

In most cases, grid-cols-* with auto rows suffices. Explicit grid-rows-* is rarely needed.

4. Not Using auto-rows-fr

Without auto-rows-fr, rows are auto-sized by content. For equal-height rows, add auto-rows-fr.

5. Span Values Exceeding Column Count

col-span-5 on a grid-cols-4 layout overflows. Ensure spans fit within the defined column count.

Practice Questions

1. How do you create a 3-column grid? grid grid-cols-3 on the container element.

2. What utility makes an item span 2 columns? col-span-2 on the child element.

3. How do you make a 4-column grid that becomes 2 columns on mobile? grid grid-cols-4 md:grid-cols-2 (reversed) or grid grid-cols-2 md:grid-cols-4 (mobile-first).

4. What does auto-rows-fr do? Sets every row to equal height using the fraction unit (fr).

5. Can grid and flex be nested? Yes. A grid item can contain a flex container and vice versa.

Challenge

Build a dashboard layout with: sidebar (col-span-3), main content (col-span-9), header spanning full width, and a widget area with col-span-4 for 3 widgets. Make it responsive.

FAQ

Mini Project

Build a photo gallery grid with: 4 columns on desktop, 2 on tablet, 1 on mobile. Use col-span-2 and row-span-2 for featured images. Add gap, rounded corners, and hover effects.

What's Next

Now master Sizing Utilities for width, height, max-width, and min-height. Combine sizing with grid and flex for complete page layouts.