03 - Layout with Grid

Grid Basics

CSS Grid is perfect for two-dimensional layouts. Tailwind makes it simple with utility classes.

Enable Grid

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

Grid Columns

Define how many columns your grid has:

<!-- 2 columns -->
<div class="grid grid-cols-2 gap-4">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-blue-500 p-4">3</div>
  <div class="bg-blue-500 p-4">4</div>
</div>

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

<!-- 4 columns -->
<div class="grid grid-cols-4 gap-4">
  <!-- 4 equal columns -->
</div>

<!-- Up to 12 columns -->
<div class="grid grid-cols-12 gap-4">
  <!-- 12 column grid system -->
</div>

Grid Rows

Define explicit rows:

<!-- 3 rows -->
<div class="grid grid-rows-3 gap-4 h-96">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-blue-500 p-4">3</div>
</div>

<!-- Combine columns and rows -->
<div class="grid grid-cols-2 grid-rows-2 gap-4 h-96">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-blue-500 p-4">3</div>
  <div class="bg-blue-500 p-4">4</div>
</div>

Gap

Add space between grid items:

<!-- Gap on all sides -->
<div class="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Horizontal gap only -->
<div class="grid grid-cols-3 gap-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Vertical gap only -->
<div class="grid grid-cols-3 gap-y-6">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Different gaps -->
<div class="grid grid-cols-3 gap-x-4 gap-y-8">
  <!-- 16px horizontal, 32px vertical -->
</div>

Column Spanning

Make items span multiple columns:

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 bg-blue-500 p-4">Spans 2 columns</div>
  <div class="bg-green-500 p-4">1 column</div>
  <div class="bg-red-500 p-4">1 column</div>
  <div class="col-span-2 bg-yellow-500 p-4">Spans 2 columns</div>
</div>

<!-- Full width -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-full bg-blue-500 p-4">Spans all columns</div>
  <div class="bg-green-500 p-4">1</div>
  <div class="bg-green-500 p-4">2</div>
  <div class="bg-green-500 p-4">3</div>
  <div class="bg-green-500 p-4">4</div>
</div>

<!-- Specific span amounts -->
<div class="grid grid-cols-12 gap-4">
  <div class="col-span-8 bg-blue-500 p-4">8 columns (main content)</div>
  <div class="col-span-4 bg-gray-300 p-4">4 columns (sidebar)</div>
</div>

Row Spanning

Make items span multiple rows:

<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <div class="row-span-2 bg-blue-500 p-4">Spans 2 rows</div>
  <div class="bg-green-500 p-4">1</div>
  <div class="bg-green-500 p-4">2</div>
  <div class="bg-green-500 p-4">3</div>
  <div class="bg-green-500 p-4">4</div>
  <div class="row-span-2 bg-red-500 p-4">Spans 2 rows</div>
  <div class="bg-green-500 p-4">5</div>
</div>

<!-- Full height -->
<div class="grid grid-rows-3 gap-4 h-96">
  <div class="row-span-full bg-blue-500 p-4">Spans all rows</div>
  <div class="bg-green-500 p-4">1</div>
  <div class="bg-green-500 p-4">2</div>
</div>

Grid Template Columns

Create custom column sizes:

<!-- Auto-fill with minimum width -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">
  <!-- Cards automatically wrap based on available space -->
  <div class="bg-blue-500 p-4">Card</div>
  <div class="bg-blue-500 p-4">Card</div>
  <div class="bg-blue-500 p-4">Card</div>
</div>

<!-- Custom sizes -->
<div class="grid grid-cols-[200px_1fr_200px] gap-4">
  <div class="bg-blue-500 p-4">Fixed 200px</div>
  <div class="bg-green-500 p-4">Flexible</div>
  <div class="bg-blue-500 p-4">Fixed 200px</div>
</div>

Alignment

Align items within grid cells:

<!-- Justify items (horizontal) -->
<div class="grid grid-cols-3 gap-4 justify-items-center">
  <div class="bg-blue-500 p-4">Centered horizontally</div>
  <div class="bg-blue-500 p-4">Centered</div>
  <div class="bg-blue-500 p-4">Centered</div>
</div>

<!-- Options: justify-items-start, center, end, stretch -->

<!-- Align items (vertical) -->
<div class="grid grid-cols-3 gap-4 h-48 items-center">
  <div class="bg-blue-500 p-4">Centered vertically</div>
  <div class="bg-blue-500 p-4">Centered</div>
  <div class="bg-blue-500 p-4">Centered</div>
</div>

<!-- Options: items-start, center, end, stretch -->

<!-- Place items (both) -->
<div class="grid grid-cols-3 gap-4 h-48 place-items-center">
  <div class="bg-blue-500 p-4">Centered both ways</div>
  <div class="bg-blue-500 p-4">Centered</div>
  <div class="bg-blue-500 p-4">Centered</div>
</div>

Practical Examples

Dashboard Layout

<div class="grid grid-cols-1 md:grid-cols-12 gap-6 p-6">
  <!-- Header spans full width -->
  <header class="col-span-full bg-white p-6 rounded-lg shadow">
    <h1 class="text-2xl font-bold">Dashboard</h1>
  </header>

  <!-- Sidebar -->
  <aside class="md:col-span-3 bg-white p-6 rounded-lg shadow">
    <nav class="space-y-2">
      <a href="#" class="block p-2 hover:bg-gray-100 rounded">Dashboard</a>
      <a href="#" class="block p-2 hover:bg-gray-100 rounded">Analytics</a>
      <a href="#" class="block p-2 hover:bg-gray-100 rounded">Settings</a>
    </nav>
  </aside>

  <!-- Main content -->
  <main class="md:col-span-9 bg-white p-6 rounded-lg shadow">
    <h2 class="text-xl font-bold mb-4">Main Content</h2>
    <p class="text-gray-600">Your dashboard content here</p>
  </main>
</div>

Photo Gallery

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-6">
  <div class="aspect-square bg-gray-200 rounded-lg overflow-hidden">
    <img src="photo1.jpg" alt="" class="w-full h-full object-cover" />
  </div>
  <div class="aspect-square bg-gray-200 rounded-lg overflow-hidden">
    <img src="photo2.jpg" alt="" class="w-full h-full object-cover" />
  </div>
  <div class="aspect-square bg-gray-200 rounded-lg overflow-hidden">
    <img src="photo3.jpg" alt="" class="w-full h-full object-cover" />
  </div>
  <div class="col-span-2 row-span-2 bg-gray-200 rounded-lg overflow-hidden">
    <img src="photo4.jpg" alt="" class="w-full h-full object-cover" />
  </div>
  <!-- More photos... -->
</div>

Card Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
  <!-- Card 1 -->
  <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
    <h3 class="text-xl font-bold mb-2">Card Title</h3>
    <p class="text-gray-600 mb-4">Card description goes here</p>
    <button class="text-blue-500 font-medium">Learn more →</button>
  </div>

  <!-- Card 2 -->
  <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
    <h3 class="text-xl font-bold mb-2">Card Title</h3>
    <p class="text-gray-600 mb-4">Card description goes here</p>
    <button class="text-blue-500 font-medium">Learn more →</button>
  </div>

  <!-- Card 3 -->
  <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
    <h3 class="text-xl font-bold mb-2">Card Title</h3>
    <p class="text-gray-600 mb-4">Card description goes here</p>
    <button class="text-blue-500 font-medium">Learn more →</button>
  </div>
</div>

Masonry-Style Layout

<div class="grid grid-cols-2 md:grid-cols-3 gap-4 p-6">
  <div class="row-span-2 bg-blue-500 p-6 rounded-lg text-white">
    <h3 class="text-xl font-bold">Tall Card</h3>
  </div>
  <div class="bg-green-500 p-6 rounded-lg text-white">
    <h3 class="text-xl font-bold">Short Card</h3>
  </div>
  <div class="row-span-3 bg-red-500 p-6 rounded-lg text-white">
    <h3 class="text-xl font-bold">Very Tall Card</h3>
  </div>
  <div class="bg-yellow-500 p-6 rounded-lg text-black">
    <h3 class="text-xl font-bold">Short Card</h3>
  </div>
  <div class="row-span-2 bg-purple-500 p-6 rounded-lg text-white">
    <h3 class="text-xl font-bold">Medium Card</h3>
  </div>
  <div class="bg-pink-500 p-6 rounded-lg text-white">
    <h3 class="text-xl font-bold">Short Card</h3>
  </div>
</div>

Blog Layout

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
  <!-- Featured post (spans 2 columns) -->
  <article class="md:col-span-2 bg-white rounded-lg shadow overflow-hidden">
    <img src="featured.jpg" alt="" class="w-full h-64 object-cover" />
    <div class="p-6">
      <span class="text-blue-500 text-sm font-medium">Featured</span>
      <h2 class="text-2xl font-bold mt-2 mb-3">Featured Article Title</h2>
      <p class="text-gray-600 mb-4">Article excerpt goes here...</p>
      <a href="#" class="text-blue-500 font-medium">Read more →</a>
    </div>
  </article>

  <!-- Sidebar -->
  <aside class="space-y-6">
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-bold mb-4">Popular Posts</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-blue-500 hover:underline">Post 1</a></li>
        <li><a href="#" class="text-blue-500 hover:underline">Post 2</a></li>
        <li><a href="#" class="text-blue-500 hover:underline">Post 3</a></li>
      </ul>
    </div>
  </aside>

  <!-- Regular posts (3 columns) -->
  <article class="bg-white rounded-lg shadow overflow-hidden">
    <img src="post1.jpg" alt="" class="w-full h-48 object-cover" />
    <div class="p-6">
      <h3 class="text-lg font-bold mb-2">Post Title</h3>
      <p class="text-gray-600 text-sm">Short description...</p>
    </div>
  </article>

  <!-- More posts... -->
</div>

Key Takeaways

  • Use grid to create a grid container
  • grid-cols-* defines number of columns
  • grid-rows-* defines number of rows
  • gap-* adds space between items
  • col-span-* makes items span multiple columns
  • row-span-* makes items span multiple rows
  • Grid is perfect for two-dimensional layouts
  • Combine with responsive utilities for adaptive layouts
  • Great for dashboards, galleries, and complex page layouts