Sign in Get started

Tailwind CSS Tutorial · Layout · Lesson 12 of 27

CSS Grid

Laying out content in rows and columns with grid: columns, spans, gaps, auto-fitting card grids and page layouts.

Create a free account to save this page, take notes and track your progress. Sign in

Columns and spans

grid grid-cols-3 gap-4 makes three equal columns. A child can span several: col-span-2. Rows work the same with grid-rows-* and row-span-*.

Columns and spansTry it yourself
<div class="grid grid-cols-3 gap-3 p-6 text-center text-sm font-medium text-white">
  <div class="col-span-3 rounded bg-indigo-500 p-3">col-span-3</div>
  <div class="col-span-2 rounded bg-indigo-400 p-3">col-span-2</div>
  <div class="rounded bg-indigo-400 p-3">1</div>
  <div class="rounded bg-indigo-300 p-3">1</div>
  <div class="rounded bg-indigo-300 p-3">1</div>
  <div class="rounded bg-indigo-300 p-3">1</div>
</div>

A responsive card grid without breakpoints

An arbitrary value with auto-fill creates as many columns as fit:

Auto-fill card gridTry it yourself
<div class="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-4 p-6">
  <div class="h-24 rounded-xl bg-emerald-200"></div><div class="h-24 rounded-xl bg-emerald-300"></div>
  <div class="h-24 rounded-xl bg-emerald-200"></div><div class="h-24 rounded-xl bg-emerald-300"></div>
  <div class="h-24 rounded-xl bg-emerald-200"></div><div class="h-24 rounded-xl bg-emerald-300"></div>
  <div class="h-24 rounded-xl bg-emerald-200"></div>
</div>

A page layout

Header, sidebar, main, footerTry it yourself
<div class="grid h-64 grid-cols-[10rem_1fr] grid-rows-[auto_1fr_auto] gap-2 p-2 text-sm">
  <header class="col-span-2 rounded bg-slate-800 p-3 text-white">Header</header>
  <aside class="rounded bg-slate-200 p-3">Sidebar</aside>
  <main class="rounded bg-white p-3 ring-1 ring-slate-200">Main content</main>
  <footer class="col-span-2 rounded bg-slate-100 p-3">Footer</footer>
</div>

Test yourself

What does col-span-2 do inside a grid?

  1. Makes the item two columns wide
  2. Creates two columns
  3. Adds 2 units of gap
  4. Moves the item to column 2
Show answer

Answer: Makes the item two columns wide

col-span-N sets grid-column: span N / span N.

Was this page helpful?