Lesson 2: Responsive Grids

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)

Your First Responsive Grid

Let's create a grid that is 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 the tablet layout. Items display in 3 columns.

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 is 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

Quick Reference: 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, then 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