In the previous lesson, we learned how to use Flexbox in TailwindCSS to align and arrange items horizontally or vertically. Flexbox is great for one-dimensional layouts — like navbars and item rows.

But what if we want to create:

• Photo galleries
• Product card layouts
• Multi-column sections
• Responsive content grids

For these structures, the best tool is:

CSS Grid — and TailwindCSS makes it incredibly easy.

🎯 What You Will Learn in This Lesson

Let’s start building 👇

🧱 Enable Grid Layout (grid)

Activating grid is simple:

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Now we need to tell the grid how many columns it should have.

🧮 Set Number of Columns (grid-cols-*)

<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-200 p-4">A</div>
  <div class="bg-gray-200 p-4">B</div>
  <div class="bg-gray-200 p-4">C</div>
</div>

This creates 3 equal columns with spacing between them.

Common column utilities:

🎨 Spacing Between Grid Items (gap-*)

Just like flexbox, gap-* works beautifully with grid:

<div class="grid grid-cols-2 gap-6">
  <div class="bg-blue-200 p-6">Item</div>
  <div class="bg-blue-200 p-6">Item</div>
</div>

gap-6 = evenly spaced layout → clean & modern.

📱 Responsive Grid (Mobile → Desktop)

Tailwind’s responsive system works perfectly with grid.

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
  <div class="bg-gray-100 p-4">Card 1</div>
  <div class="bg-gray-100 p-4">Card 2</div>
  <div class="bg-gray-100 p-4">Card 3</div>
  <div class="bg-gray-100 p-4">Card 4</div>
</div>

This means:

• On mobile → 1 column
• On small screens → 2 columns
• On medium screens → 3 columns
• On large screens → 4 columns

✅ Perfect for galleries and product grids.

🖼 Mini Demo: Build a Photo Gallery

<section class="p-8">
  <h2 class="text-2xl font-bold mb-6">Photo Gallery</h2>

  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <img src="https://picsum.photos/300/200?1" class="rounded shadow" />
    <img src="https://picsum.photos/300/200?2" class="rounded shadow" />
    <img src="https://picsum.photos/300/200?3" class="rounded shadow" />
    <img src="https://picsum.photos/300/200?4" class="rounded shadow" />
    <img src="https://picsum.photos/300/200?5" class="rounded shadow" />
    <img src="https://picsum.photos/300/200?6" class="rounded shadow" />
  </div>
</section>

What’s happening here:

• grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 → responsive layout
• gap-4 → nice spacing
• rounded shadow → polished UI

Beautiful, simple, fast ✨

✅ Summary

Grid + Responsive classes = Professional layouts in seconds