← Back to Learning Path Tailwind • Level 2 • Lesson 6 of 6
Level 2 progress 0% complete

Lesson 6: Common Grid Patterns

Master real-world layouts used in modern websites and applications.

Real-World Grid Patterns

Now that you know the fundamentals, let's build actual layouts you will use in projects. These patterns appear everywhere, from dashboards to e-commerce sites to blogs.

Pattern 1: Card Grid

The most common pattern: a responsive grid of cards that adapts from 1 column on mobile to 4 on desktop:

<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-lg p-6">
    <img src="product1.jpg" class="w-full h-48 object-cover rounded mb-4">
    <h3 class="text-xl font-bold mb-2">Product Name</h3>
    <p class="text-gray-600 mb-4">Product description here...</p>
    <button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
      Add to Cart
    </button>
  </div>
  <!-- Repeat for more cards -->
</div>

Responsive behavior:

Why This Works Starting with 1 column ensures mobile users get full-width cards, then progressively adding columns as screen size increases creates the optimal reading experience on every device.

Pattern 2: Dashboard Layout

A classic dashboard with sidebar, header, and main content area:

<div class="grid grid-rows-[auto_1fr] grid-cols-[250px_1fr] gap-0 h-screen">
  <!-- Sidebar (spans full height) -->
  <nav class="row-span-2 bg-gray-900 text-white p-6">
    <h2 class="text-xl font-bold mb-6">My App</h2>
    <ul class="space-y-2">
      <li class="hover:bg-gray-800 p-2 rounded cursor-pointer">Dashboard</li>
      <li class="hover:bg-gray-800 p-2 rounded cursor-pointer">Analytics</li>
      <li class="hover:bg-gray-800 p-2 rounded cursor-pointer">Settings</li>
    </ul>
  </nav>
  
  <!-- Header -->
  <header class="bg-white border-b px-6 py-4 flex items-center justify-between">
    <h1 class="text-2xl font-bold">Dashboard</h1>
    <div class="flex items-center gap-4">
      <button class="text-gray-600">Notifications</button>
      <button class="text-gray-600">Profile</button>
    </div>
  </header>
  
  <!-- Main Content -->
  <main class="bg-gray-50 p-6 overflow-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- Stats cards -->
      <div class="bg-white p-6 rounded-lg shadow">
        <p class="text-gray-600">Total Sales</p>
        <p class="text-3xl font-bold">$12,345</p>
      </div>
      <div class="bg-white p-6 rounded-lg shadow">
        <p class="text-gray-600">New Users</p>
        <p class="text-3xl font-bold">234</p>
      </div>
      <div class="bg-white p-6 rounded-lg shadow">
        <p class="text-gray-600">Growth</p>
        <p class="text-3xl font-bold">+15%</p>
      </div>
    </div>
  </main>
</div>

This uses advanced grid sizing: grid-rows-[auto_1fr] makes the header auto-height and main content fills remaining space. The sidebar is fixed at 250px wide.

Pattern 3: Blog Layout with Sidebar

A traditional blog layout where content is on the left, sidebar on the right:

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-7xl mx-auto p-6">
  <!-- Main content (2 columns on desktop) -->
  <main class="lg:col-span-2">
    <article class="bg-white rounded-lg shadow p-8 mb-8">
      <h1 class="text-4xl font-bold mb-4">Article Title</h1>
      <p class="text-gray-600 mb-4">Published on March 17, 2026</p>
      <img src="featured.jpg" class="w-full h-64 object-cover rounded mb-6">
      <div class="prose prose-lg">
        <p>Article content goes here...</p>
      </div>
    </article>
  </main>
  
  <!-- Sidebar (1 column) -->
  <aside class="space-y-6">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-bold mb-4">About the Author</h3>
      <p class="text-gray-600">Bio goes here...</p>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-bold mb-4">Recent Posts</h3>
      <ul class="space-y-2">
        <li class="text-blue-600 hover:underline cursor-pointer">Post 1</li>
        <li class="text-blue-600 hover:underline cursor-pointer">Post 2</li>
        <li class="text-blue-600 hover:underline cursor-pointer">Post 3</li>
      </ul>
    </div>
  </aside>
</div>

On mobile, content and sidebar stack. On large screens, content takes 2 columns (66%), sidebar takes 1 (33%).

Pattern 4: Masonry-Style Image Gallery

Different-sized images create visual interest:

<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  <!-- Large featured image -->
  <div class="col-span-2 row-span-2">
    <img src="featured.jpg" class="w-full h-full object-cover rounded-lg">
  </div>
  
  <!-- Regular images -->
  <img src="photo1.jpg" class="w-full h-48 object-cover rounded-lg">
  <img src="photo2.jpg" class="w-full h-48 object-cover rounded-lg">
  <img src="photo3.jpg" class="w-full h-48 object-cover rounded-lg">
  <img src="photo4.jpg" class="w-full h-48 object-cover rounded-lg">
  
  <!-- Wide panoramic image -->
  <div class="col-span-2">
    <img src="panorama.jpg" class="w-full h-48 object-cover rounded-lg">
  </div>
  
  <img src="photo5.jpg" class="w-full h-48 object-cover rounded-lg">
  <img src="photo6.jpg" class="w-full h-48 object-cover rounded-lg">
</div>

Pattern 5: Pricing Table

Three-column pricing cards with a featured plan:

<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto p-6">
  <!-- Basic Plan -->
  <div class="bg-white rounded-lg shadow p-8 border-2 border-gray-200">
    <h3 class="text-2xl font-bold mb-2">Basic</h3>
    <p class="text-4xl font-bold mb-6">$9<span class="text-lg">/mo</span></p>
    <ul class="space-y-3 mb-8">
      <li>10 Projects</li>
      <li>5GB Storage</li>
      <li>Basic Support</li>
    </ul>
    <button class="w-full bg-gray-200 text-gray-800 py-3 rounded font-bold">
      Choose Basic
    </button>
  </div>
  
  <!-- Pro Plan (Featured) -->
  <div class="bg-blue-600 text-white rounded-lg shadow-xl p-8 border-4 border-blue-500 
              transform scale-105">
    <div class="bg-yellow-400 text-blue-900 text-xs font-bold px-3 py-1 rounded-full 
                inline-block mb-2">
      MOST POPULAR
    </div>
    <h3 class="text-2xl font-bold mb-2">Pro</h3>
    <p class="text-4xl font-bold mb-6">$29<span class="text-lg">/mo</span></p>
    <ul class="space-y-3 mb-8">
      <li>Unlimited Projects</li>
      <li>100GB Storage</li>
      <li>Priority Support</li>
      <li>Advanced Features</li>
    </ul>
    <button class="w-full bg-white text-blue-600 py-3 rounded font-bold 
                   hover:bg-gray-100">
      Choose Pro
    </button>
  </div>
  
  <!-- Enterprise Plan -->
  <div class="bg-white rounded-lg shadow p-8 border-2 border-gray-200">
    <h3 class="text-2xl font-bold mb-2">Enterprise</h3>
    <p class="text-4xl font-bold mb-6">$99<span class="text-lg">/mo</span></p>
    <ul class="space-y-3 mb-8">
      <li>Unlimited Everything</li>
      <li>Dedicated Support</li>
      <li>Custom Features</li>
      <li>SLA Guarantee</li>
    </ul>
    <button class="w-full bg-gray-200 text-gray-800 py-3 rounded font-bold">
      Contact Sales
    </button>
  </div>
</div>
Pro Tip The featured plan uses transform scale-105 to make it slightly larger, drawing attention. This is a common e-commerce pattern to highlight the recommended option.

Pattern 6: Form Layout

Multi-column forms that stack on mobile:

<form class="bg-white rounded-lg shadow p-8 max-w-4xl mx-auto">
  <h2 class="text-2xl font-bold mb-6">Contact Form</h2>
  
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
    <div>
      <label class="block text-gray-700 font-bold mb-2">First Name</label>
      <input type="text" 
             class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none 
                    focus:border-blue-500">
    </div>
    <div>
      <label class="block text-gray-700 font-bold mb-2">Last Name</label>
      <input type="text" 
             class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none 
                    focus:border-blue-500">
    </div>
  </div>
  
  <div class="mb-6">
    <label class="block text-gray-700 font-bold mb-2">Email</label>
    <input type="email" 
           class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none 
                  focus:border-blue-500">
  </div>
  
  <div class="mb-6">
    <label class="block text-gray-700 font-bold mb-2">Message</label>
    <textarea rows="5" 
              class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none 
                     focus:border-blue-500"></textarea>
  </div>
  
  <button class="w-full bg-blue-600 text-white py-3 rounded font-bold 
                 hover:bg-blue-700">
    Send Message
  </button>
</form>

First and Last Name are side-by-side on tablets and up, but stack vertically on mobile for easier thumb typing.

Level 2 Complete You have mastered practical Tailwind Grid layouts. You can now build cards, dashboards, blogs, galleries, pricing tables, and forms. In Level 3, you will learn advanced techniques like grid flow and auto sizing.

Quick Reference: Common Patterns

Practice Time

Pick one of these patterns and build it in the generator. Start with the card grid, it is the most versatile.

Open Generator

Quick Check

Test your knowledge before completing Level 2. All 3 questions must be correct to continue.

1. For a responsive card grid that goes from 1 to 4 columns, which classes should you use?

2. In a 3-column blog layout, how do you make the main content take 2 columns and sidebar take 1?

3. What is the benefit of using transform scale-105 on a featured pricing plan?

← Previous Lesson