Grid

CSS Grid in Tailwind

Create grids with a few utilities:

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Columns:

• grid-cols-1 through grid-cols-12
• grid-cols-none — no grid

Gap:

• gap-4, gap-x-4, gap-y-4

Spanning:

• col-span-2 — span 2 columns
• col-span-full — full width
• row-span-2 — span 2 rows

Auto columns:

• auto-cols-fr — equal width auto columns

Your Task

Create a 3-column grid with gap and at least one item with col-span-2.