~/css/tailwind-grid-layouts

6 Tailwind Grid Layouts

6 TailwindPublished 2026-10-05Free · no sign-up

Six grid layouts with Tailwind utilities: an auto-fit grid that picks its own columns, column spans, named template areas, dense packing, the header-sidebar-main-footer layout and a gallery with one featured image.

Filter demos

01. Tailwind Auto-Fit Responsive Grid

TailwindGridResponsive

A grid that decides its own column count: grid-cols-[repeat(auto-fit,minmax(5rem,1fr))] fits as many 5rem columns as there is room for and stretches them to fill. No breakpoints are needed.

View code

<ul class="grid w-full max-w-sm grid-cols-[repeat(auto-fit,minmax(5rem,1fr))] gap-2">
  <li class="grid h-16 place-items-center rounded-lg bg-indigo-100 text-sm font-bold text-indigo-900">1</li>
  <li class="grid h-16 place-items-center rounded-lg bg-indigo-100 text-sm font-bold text-indigo-900">2</li>
  <li class="grid h-16 place-items-center rounded-lg bg-indigo-100 text-sm font-bold text-indigo-900">3</li>
  <li class="grid h-16 place-items-center rounded-lg bg-indigo-100 text-sm font-bold text-indigo-900">4</li>
  <li class="grid h-16 place-items-center rounded-lg bg-indigo-100 text-sm font-bold text-indigo-900">5</li>
  <li class="grid h-16 place-items-center rounded-lg bg-indigo-100 text-sm font-bold text-indigo-900">6</li>
</ul>

02. Tailwind Column Spans

TailwindGridSpan

A four-column grid where items span different widths with col-span-2, col-span-3 and col-span-full. Each tile is labelled with its span so the structure is easy to read.

View code

<div class="grid w-full max-w-sm grid-cols-4 gap-2 text-xs font-bold text-emerald-950">
  <div class="col-span-full rounded-lg bg-emerald-300 p-3">col-span-full</div>
  <div class="col-span-3 rounded-lg bg-emerald-200 p-3">col-span-3</div>
  <div class="rounded-lg bg-emerald-100 p-3">1</div>
  <div class="col-span-2 rounded-lg bg-emerald-200 p-3">col-span-2</div>
  <div class="col-span-2 rounded-lg bg-emerald-200 p-3">col-span-2</div>
</div>

03. Tailwind Named Grid Areas

TailwindGridAreas

grid-template-areas through an arbitrary property: each row is a quoted string, underscores stand for spaces, and children are placed with [grid-area:name]. The layout reads like a little map in the class list.

View code

<div class="grid h-56 w-full max-w-sm grid-cols-[5rem_1fr] grid-rows-[auto_1fr_auto] gap-2 text-sm font-semibold [grid-template-areas:'head_head'_'side_main'_'foot_foot']">
  <div class="rounded-lg bg-sky-200 p-2 text-sky-950 [grid-area:head]">head</div>
  <div class="rounded-lg bg-sky-100 p-2 text-sky-950 [grid-area:side]">side</div>
  <div class="rounded-lg bg-white p-2 text-slate-800 ring-1 ring-sky-200 [grid-area:main]">main</div>
  <div class="rounded-lg bg-sky-200 p-2 text-sky-950 [grid-area:foot]">foot</div>
</div>

04. Tailwind Dense Grid Packing

TailwindGridDense

grid-flow-row-dense lets later small items fill holes left by bigger ones, so a grid of mixed sizes packs tightly. Note that visual order can then differ from source order, so keep it for decorative tiles.

View code

<div class="grid w-full max-w-sm grid-flow-row-dense grid-cols-3 gap-2 text-sm font-bold text-amber-950">
  <div class="col-span-2 rounded-lg bg-amber-300 p-3">A wide</div>
  <div class="col-span-2 rounded-lg bg-amber-300 p-3">B wide</div>
  <div class="rounded-lg bg-amber-100 p-3">C</div>
  <div class="rounded-lg bg-amber-100 p-3">D</div>
  <div class="col-span-2 rounded-lg bg-amber-300 p-3">E wide</div>
</div>

05. Tailwind Holy Grail Grid

TailwindGridLayout

The classic page layout of header, sidebar, main and footer in one grid: grid-rows-[auto_1fr_auto] gives the middle row all the spare height and grid-cols-[6rem_1fr] fixes the sidebar width.

View code

<div class="grid h-60 w-full max-w-sm grid-cols-[6rem_1fr] grid-rows-[auto_1fr_auto] overflow-hidden rounded-xl text-xs font-semibold ring-1 ring-slate-300">
  <div class="col-span-2 bg-slate-900 px-3 py-2 text-white">Header</div>
  <div class="bg-slate-200 p-3 text-slate-800">Sidebar</div>
  <div class="bg-white p-3 text-slate-700">Main content grows to fill the height.</div>
  <div class="col-span-2 bg-slate-100 px-3 py-2 text-slate-700">Footer</div>
</div>

06. Tailwind Featured Gallery Grid

TailwindGridGallery

A photo grid where the first picture takes a two-by-two block and the others fill around it. aspect-square on each tile keeps the rows even, and the big tile spans with col-span-2 row-span-2.

View code

<ul class="grid w-full max-w-xs grid-cols-3 gap-2">
  <li class="col-span-2 row-span-2"><div role="img" aria-label="Lighthouse at sunset" class="size-full min-h-[8rem] rounded-xl bg-[linear-gradient(#fb923c,#db2777_55%,#1e1b4b_56%)]"></div></li>
  <li><div role="img" aria-label="Rocky shore" class="aspect-square rounded-xl bg-[linear-gradient(#94a3b8,#334155)]"></div></li>
  <li><div role="img" aria-label="Sea grass" class="aspect-square rounded-xl bg-[linear-gradient(#bef264,#15803d)]"></div></li>
  <li><div role="img" aria-label="Sailing boat" class="aspect-square rounded-xl bg-[linear-gradient(#bae6fd,#0369a1)]"></div></li>
  <li><div role="img" aria-label="Harbour lights" class="aspect-square rounded-xl bg-[linear-gradient(#fde68a,#b45309)]"></div></li>
  <li><div role="img" aria-label="Night beach" class="aspect-square rounded-xl bg-[linear-gradient(#6366f1,#1e1b4b)]"></div></li>
</ul>

About these Tailwind Grid Layouts

Auto-fit without breakpoints

grid-cols-[repeat(auto-fit,minmax(5rem,1fr))] fits as many columns as there is room for, so the grid adapts to any container.

Spans and rows

col-span-2, col-span-full and row-span-2 place items across tracks; grid-rows-[auto_1fr_auto] gives the middle row the spare height.

Template areas

[grid-template-areas:'head_head'_'side_main'] and [grid-area:main] bring named areas to Tailwind through arbitrary properties.

Dense with caution

grid-flow-row-dense fills gaps, but visual order can differ from reading order, which confuses keyboard users on interactive content.

Frequently asked questions

Why use arbitrary values for grids?

Tailwind covers equal columns; anything else, such as minmax or areas, uses an arbitrary value.

Is grid better than flex?

Grid is for two-dimensional layouts, flex for one row or column.

Is there a CSS version?

Yes, see the CSS grid layouts collection.