Responsive Layouts

Responsive Grid Layouts

The most common responsive pattern: 1 column on mobile -> 2 on tablet -> 3 on desktop.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

Responsive flex:

<!-- Stack on mobile, row on tablet+ -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/3">Sidebar</div>
  <div class="w-full md:w-2/3">Main</div>
</div>

Hide/show at breakpoints:

<div class="hidden md:block">Hidden on mobile</div>
<div class="block md:hidden">Visible on mobile only</div>

Responsive max-width containers:

<div class="max-w-sm md:max-w-2xl lg:max-w-4xl mx-auto">
  Content with expanding container
</div>

Your Task

Create a card grid that goes from 1 column on mobile to 2 on tablet (md:) to 3 on desktop (lg:).