Lesson 2: Responsive Grids | Gridlock Holmes

What is Responsive Design?

Responsive design means your layout adapts to different screen sizes. A 3-column grid might look great on desktop, but on mobile it should switch to a single column for better readability.

Tailwind makes this incredibly easy with breakpoint prefixes. Instead of writing media queries in CSS, you simply prefix your utility classes with the breakpoint name.

Tailwind's Breakpoints

Tailwind uses five default breakpoints that cover most devices:

sm: 640px and up (large phones in landscape, small tablets)
md: 768px and up (tablets)
lg: 1024px and up (laptops, small desktops)
xl: 1280px and up (desktops)
2xl: 1536px and up (large desktops)

💡 Mobile-First Approach:

Tailwind uses a mobile-first approach. This means unprefixed classes (like grid-cols-1) apply to all screen sizes, while prefixed classes (like md:grid-cols-3) only apply at that breakpoint and above.

Your First Responsive Grid

Let's create a grid that's 1 column on mobile, 2 columns on tablets, and 3 columns on desktop:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-blue-500 text-white p-4 rounded">Item 1</div>
  <div class="bg-blue-500 text-white p-4 rounded">Item 2</div>
  <div class="bg-blue-500 text-white p-4 rounded">Item 3</div>
  <div class="bg-blue-500 text-white p-4 rounded">Item 4</div>
  <div class="bg-blue-500 text-white p-4 rounded">Item 5</div>
  <div class="bg-blue-500 text-white p-4 rounded">Item 6</div>
</div>

How this works:

grid-cols-1 - Default: 1 column on mobile (applies to all sizes)
md:grid-cols-2 - Medium screens (768px+): switches to 2 columns
lg:grid-cols-3 - Large screens (1024px+): switches to 3 columns

Understanding the Mobile-First Flow

Let's trace how the layout changes as the screen gets wider:

Mobile (0-767px):

Only grid-cols-1 applies. Items stack vertically in a single column.

Tablet (768px-1023px):

md:grid-cols-2 kicks in, overriding the mobile layout. Items display in 2 columns.

Desktop (1024px+):

lg:grid-cols-3 takes effect, overriding tablet layout. Items display in 3 columns.

⚠️ Common Mistake:

Don't use sm: for mobile styles! Use unprefixed classes instead. The sm: prefix means "at small screens and up" (640px+), not "only on small screens."

Responsive Gap Spacing

You can also make gap sizes responsive. Smaller gaps on mobile, larger on desktop:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 
            gap-2 md:gap-4 lg:gap-6">
  <div class="bg-purple-500 text-white p-4 rounded">Item 1</div>
  <div class="bg-purple-500 text-white p-4 rounded">Item 2</div>
  <div class="bg-purple-500 text-white p-4 rounded">Item 3</div>
</div>

gap-2 - 0.5rem (8px) on mobile
md:gap-4 - 1rem (16px) on tablets
lg:gap-6 - 1.5rem (24px) on desktops

Real-World Example: Card Grid

Here's a practical example of a responsive card grid commonly used in websites:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  <div class="bg-white rounded-lg shadow-lg p-6">
    <h3 class="text-xl font-bold mb-2">Card 1</h3>
    <p class="text-gray-600">Some content here</p>
  </div>
  <div class="bg-white rounded-lg shadow-lg p-6">
    <h3 class="text-xl font-bold mb-2">Card 2</h3>
    <p class="text-gray-600">Some content here</p>
  </div>
  <div class="bg-white rounded-lg shadow-lg p-6">
    <h3 class="text-xl font-bold mb-2">Card 3</h3>
    <p class="text-gray-600">Some content here</p>
  </div>
  <div class="bg-white rounded-lg shadow-lg p-6">
    <h3 class="text-xl font-bold mb-2">Card 4</h3>
    <p class="text-gray-600">Some content here</p>
  </div>
</div>

Behavior:

Mobile: 1 column (stacked cards)
Small screens (640px+): 2 columns
Large screens (1024px+): 4 columns

Combining Multiple Breakpoints

You can use as many breakpoints as needed for fine-grained control:

<div class="grid 
            grid-cols-1 
            sm:grid-cols-2 
            md:grid-cols-3 
            lg:grid-cols-4 
            xl:grid-cols-6 
            gap-4">
  <!-- 1 col mobile, 2 small, 3 medium, 4 large, 6 xl -->
</div>

Why Mobile-First?

Tailwind's mobile-first approach has several advantages:

Performance: Mobile styles load first, making pages faster on phones
Progressive Enhancement: Start with the most constrained layout, add features for larger screens
Simpler Code: Override only what changes, not everything
Better UX: Ensures the mobile experience is prioritized

✅ Best Practice:

Design your grid for mobile first (unprefixed classes), then add breakpoints to enhance the layout as screens get larger. This ensures your site works on all devices.

Quick Reference: Breakpoints

Here's a handy reference for Tailwind's default breakpoints:

sm: - Small devices (≥640px) - Large phones landscape
md: - Medium devices (≥768px) - Tablets portrait
lg: - Large devices (≥1024px) - Tablets landscape, laptops
xl: - Extra large devices (≥1280px) - Desktops
2xl: - 2X large devices (≥1536px) - Large desktops

Testing Responsive Layouts

To test your responsive grids:

Open browser DevTools (F12 or right-click → Inspect)
Click the device toolbar icon (or Ctrl+Shift+M)
Select different device sizes or drag to resize
Watch your grid adapt at each breakpoint!

📱 Lesson 2: Responsive Grids