CSS Grid

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.

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

Quick check: How do you make an item span two grid columns?

• span-x-2
• grid-2
• col-span-2
• w-2