CSS Grid with Tailwind

Flexbox handles rows or columns; CSS Grid handles rows and columns at once. Photo galleries, dashboards, pricing tables, and magazine layouts are all natural grid territory. Tailwind CSS turns the entire grid specification into readable utilities, and in this lesson you will learn columns, gaps, spanning, explicit placement, and auto-fit patterns.

Creating a Grid

Add grid and a column count, then let gap handle the spacing:

html

<div class="grid grid-cols-3 gap-4">
  <div class="rounded bg-teal-200 p-6">1</div>
  <div class="rounded bg-teal-300 p-6">2</div>
  <div class="rounded bg-teal-400 p-6">3</div>
  <div class="rounded bg-teal-500 p-6">4</div>
  <div class="rounded bg-teal-600 p-6">5</div>
  <div class="rounded bg-teal-700 p-6">6</div>
</div>

grid-cols-3 creates three equal-width columns, and items flow into rows automatically. Tailwind supports grid-cols-1 through grid-cols-12, plus grid-rows-* for explicit row counts.

Gaps

gap-4 spaces both axes; gap-x-6 and gap-y-2 control each axis independently. Unlike margins, gaps never create awkward outer spacing around the grid edges.

Spanning Rows and Columns

Real layouts need featured items that occupy more than one cell:

col-span-2 — item spans two columns
row-span-2 — item spans two rows
col-span-full — item stretches across every column

html

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 row-span-2 rounded bg-violet-500 p-6 text-white">Featured</div>
  <div class="rounded bg-violet-200 p-6">A</div>
  <div class="rounded bg-violet-200 p-6">B</div>
  <div class="col-span-3 rounded bg-violet-300 p-6">Full-width footer cell</div>
</div>

This five-line snippet is a complete bento-style layout, one of the most popular design patterns of the last few years.

Explicit Placement

You can pin an item to exact grid lines with col-start-* and col-end-*:

html

<div class="grid grid-cols-6 gap-2">
  <div class="col-start-2 col-end-5 rounded bg-amber-300 p-4">Columns 2 through 4</div>
</div>

Grid lines are numbered from 1, and col-end is exclusive, exactly like raw CSS Grid.

Responsive Grids

Grids shine when combined with breakpoints (fully covered next lesson). The most common card-grid recipe on the web:

html

<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <!-- cards -->
</div>

One column on phones, two on tablets, three on desktops, all from three utilities.

Auto-Fit with Arbitrary Values

For grids that add columns automatically as space allows, use an arbitrary value:

html

<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <!-- items -->
</div>

Every item is at least 200px wide, and the browser fits as many columns as possible. No media queries needed.

Alignment Inside the Grid

The same alignment vocabulary from flexbox applies: items-center aligns cell content vertically, justify-items-center horizontally, and place-items-center does both at once. On individual items, place-self-center overrides the defaults.

Grid or Flexbox?

Use flexbox when content should determine sizing (navbars, button rows, tag lists). Use grid when the layout should determine sizing (galleries, dashboards, page scaffolding). They compose beautifully: a grid page with flexbox inside each card is the standard modern architecture.

Key Takeaways

grid grid-cols-{n} gap-{n} builds an equal-column grid in one line.
col-span-* and row-span-* create featured, bento-style cells.
col-start-* / col-end-* pin items to exact grid lines.
The auto-fit,minmax() arbitrary value makes self-responsive grids.
Grid defines the page skeleton; flexbox arranges content within cells.

Next up: Responsive Design and Breakpoints, where the sm:, md:, and lg: prefixes unlock adaptive layouts.