Grids

CSS Grid in Tailwind

CSS Grid is a two-dimensional layout system — it handles both columns and rows simultaneously. While Flexbox excels at one-dimensional layouts, Grid shines for complex page structures. Tailwind provides intuitive utilities for the full Grid spec.

Enabling Grid

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

grid activates display: grid. grid-cols-3 creates three equal-width columns. gap-4 adds 1rem spacing between all cells.

Grid Columns

Grid Rows

<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="bg-purple-200 p-4">1</div>
  <div class="bg-purple-200 p-4">2</div>
  <div class="bg-purple-200 p-4">3</div>
  <div class="bg-purple-200 p-4">4</div>
  <div class="bg-purple-200 p-4">5</div>
  <div class="bg-purple-200 p-4">6</div>
</div>

grid-rows-3 creates 3 explicit rows. grid-flow-col fills columns first instead of rows.

Gap

<!-- Equal gap on all sides -->
<div class="grid grid-cols-3 gap-6">...</div>

<!-- Different row and column gaps -->
<div class="grid grid-cols-3 gap-x-8 gap-y-4">...</div>

Column Spanning

Make items span multiple columns:

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 bg-indigo-200 p-4">Spans 2 columns</div>
  <div class="bg-indigo-200 p-4">1 col</div>
  <div class="bg-indigo-200 p-4">1 col</div>
  <div class="bg-indigo-200 p-4">1 col</div>
  <div class="col-span-3 bg-indigo-200 p-4">Spans 3 columns</div>
</div>

Row Spanning

<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <div class="row-span-2 bg-green-200 p-4">Tall item (2 rows)</div>
  <div class="bg-green-200 p-4">Normal</div>
  <div class="bg-green-200 p-4">Normal</div>
  <div class="col-span-2 bg-green-200 p-4">Wide item (2 cols)</div>
</div>

Responsive Grids

Combine grid with responsive prefixes for adaptive layouts:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="bg-white rounded-lg shadow p-4">Item 1</div>
  <div class="bg-white rounded-lg shadow p-4">Item 2</div>
  <div class="bg-white rounded-lg shadow p-4">Item 3</div>
  <div class="bg-white rounded-lg shadow p-4">Item 4</div>
  <div class="bg-white rounded-lg shadow p-4">Item 5</div>
  <div class="bg-white rounded-lg shadow p-4">Item 6</div>
  <div class="bg-white rounded-lg shadow p-4">Item 7</div>
  <div class="bg-white rounded-lg shadow p-4">Item 8</div>
</div>

Practical Example — Dashboard Layout

<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 p-6">
  <!-- Stats row -->
  <div class="bg-white rounded-xl shadow p-6">
    <p class="text-sm text-gray-500">Total Users</p>
    <p class="text-3xl font-bold text-gray-900 mt-1">12,843</p>
    <p class="text-sm text-green-600 mt-2">↑ 12% from last month</p>
  </div>
  <div class="bg-white rounded-xl shadow p-6">
    <p class="text-sm text-gray-500">Revenue</p>
    <p class="text-3xl font-bold text-gray-900 mt-1">$48,250</p>
    <p class="text-sm text-green-600 mt-2">↑ 8% from last month</p>
  </div>
  <div class="bg-white rounded-xl shadow p-6">
    <p class="text-sm text-gray-500">Orders</p>
    <p class="text-3xl font-bold text-gray-900 mt-1">3,421</p>
    <p class="text-sm text-red-600 mt-2">↓ 3% from last month</p>
  </div>
  <div class="bg-white rounded-xl shadow p-6">
    <p class="text-sm text-gray-500">Conversion</p>
    <p class="text-3xl font-bold text-gray-900 mt-1">2.4%</p>
    <p class="text-sm text-green-600 mt-2">↑ 0.5% from last month</p>
  </div>

  <!-- Chart area (spans 3 cols on large screens) -->
  <div class="lg:col-span-3 bg-white rounded-xl shadow p-6">
    <h3 class="font-bold text-gray-900 mb-4">Revenue Chart</h3>
    <div class="bg-gray-50 rounded-lg h-64 flex items-center justify-center text-gray-400">
      Chart placeholder
    </div>
  </div>

  <!-- Sidebar (1 col) -->
  <div class="bg-white rounded-xl shadow p-6">
    <h3 class="font-bold text-gray-900 mb-4">Recent Activity</h3>
    <ul class="space-y-3 text-sm text-gray-600">
      <li class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span> New order #3421</li>
      <li class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span> User registered</li>
      <li class="flex items-center"><span class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span> Payment pending</li>
    </ul>
  </div>
</div>

Practical Example — Image Gallery

<div class="grid grid-cols-2 md:grid-cols-3 gap-2">
  <div class="row-span-2">
    <img src="https://picsum.photos/400/500?random=1" class="w-full h-full object-cover rounded-lg" alt="">
  </div>
  <div>
    <img src="https://picsum.photos/400/250?random=2" class="w-full h-full object-cover rounded-lg" alt="">
  </div>
  <div>
    <img src="https://picsum.photos/400/250?random=3" class="w-full h-full object-cover rounded-lg" alt="">
  </div>
  <div>
    <img src="https://picsum.photos/400/250?random=4" class="w-full h-full object-cover rounded-lg" alt="">
  </div>
  <div>
    <img src="https://picsum.photos/400/250?random=5" class="w-full h-full object-cover rounded-lg" alt="">
  </div>
</div>

Recap

• grid enables CSS Grid; grid-cols-* defines the number of columns.
• gap-*, gap-x-*, gap-y-* control spacing between cells.
• col-span-* and row-span-* make items span multiple tracks.
• col-start-* and col-end-* position items precisely on the grid.
• Responsive grids combine grid-cols-* with breakpoint prefixes.

Next, we will explore how to create beautiful buttons with Tailwind.