CSS Grid Layout

Tailwind provides a complete 12-column CSS Grid system for building complex 2D layouts easily.

1. Basic Grid Columns (`grid-cols-*`)

2. Column Spanning (`col-span-*`)

Individual grid items can span across multiple columns using col-span-{number}:

<div className="grid grid-cols-12 gap-4">
  <div className="col-span-4 bg-blue-600 p-4">Sidebar (4 Cols)</div>
  <div className="col-span-8 bg-indigo-600 p-4">Main Content (8 Cols)</div>
</div>

3. Responsive Grid Pattern

Switch column counts seamlessly across screen sizes:

<!-- 1 column on Mobile, 2 on Tablet (md), 4 on Desktop (lg) -->
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <div className="card">Card 1</div>
  <div className="card">Card 2</div>
  <div className="card">Card 3</div>
  <div className="card">Card 4</div>
</div>