# CSS Grid — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/l-grid

> Two-dimensional layouts.

## Columns, spans and auto-fit

`grid grid-cols-3 gap-6` creates three equal columns; `col-span-2` lets an item span two. Responsive grids change column counts per breakpoint (`grid-cols-1 md:grid-cols-3`). Arbitrary templates handle special layouts: `grid-cols-[240px_1fr]` for a sidebar, or `grid-cols-[repeat(auto-fill,minmax(16rem,1fr))]` for cards that wrap automatically. `place-items-center` centres content in both directions.

## A dashboard layout and a card grid

Sidebar plus responsive cards.

```html
<div class="grid min-h-dvh grid-cols-1 lg:grid-cols-[240px_1fr]">
  <aside class="hidden lg:block border-r p-4">Sidebar</aside>
  <main class="p-6">
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
      <article class="rounded-xl border p-4">Card 1</article>
      <article class="rounded-xl border p-4 sm:col-span-2 xl:col-span-1">Card 2</article>
      <article class="rounded-xl border p-4">Card 3</article>
    </div>
  </main>
</div>
```

## Use grid for page structure, flex for components

Grid excels at aligning rows and columns together; flexbox at distributing items in one line.

**Quiz:** How do you make an item span two grid columns?

- [ ] span-x-2
- [ ] grid-2
- [x] col-span-2
- [ ] w-2

*Answer:* col-span-2. Column span utilities.