Grid Utilities

Where flexbox excels at laying out items along a single row or column, CSS Grid handles two-dimensional layout — rows and columns together — and Tailwind's grid utilities mirror that distinction directly.

Defining columns

<div class="grid grid-cols-3 gap-4">
  <div class="rounded bg-slate-100 p-4">1</div>
  <div class="rounded bg-slate-100 p-4">2</div>
  <div class="rounded bg-slate-100 p-4">3</div>
  <div class="rounded bg-slate-100 p-4">4</div>
</div>

grid sets display: grid, and grid-cols-3 creates three equal-width columns (grid-template-columns: repeat(3, minmax(0, 1fr))). Items simply flow into the grid in source order — a fourth item wraps to a new row automatically, still split across the same three columns. gap-4 here spaces both rows and columns at once, which is usually all a grid needs.

Responsive column counts

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <div class="rounded-lg bg-white p-4 shadow">Product</div>
  <div class="rounded-lg bg-white p-4 shadow">Product</div>
  <div class="rounded-lg bg-white p-4 shadow">Product</div>
  <div class="rounded-lg bg-white p-4 shadow">Product</div>
</div>

This is the single most common grid pattern on the web — a product grid, image gallery, or card list that reflows its column count as the viewport widens. Changing grid-cols-1 to grid-cols-4 at lg doesn't touch any child element; the grid container alone decides how many columns exist at each width.

Spanning multiple columns or rows

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 rounded bg-blue-100 p-4">Featured (spans 2 columns)</div>
  <div class="rounded bg-slate-100 p-4">Regular</div>
  <div class="rounded bg-slate-100 p-4">Regular</div>
  <div class="rounded bg-slate-100 p-4">Regular</div>
</div>

col-span-2 makes a single item stretch across two of the grid's three columns — a common way to highlight a featured item within an otherwise uniform grid. row-span-* does the same along rows, useful for a taller item (like a large image) that needs to occupy the height of two shorter rows next to it.

Custom track sizes with arbitrary values

Not every layout is evenly divided columns. For an app shell with a fixed sidebar and a flexible main area, an arbitrary value expresses an exact track list:

<div class="grid grid-cols-[240px_1fr] min-h-screen">
  <aside class="bg-slate-900">Sidebar</aside>
  <main class="p-6">Main content</main>
</div>

grid-cols-[240px_1fr] defines two columns directly — a fixed 240px sidebar and a second column (1fr) that takes up all remaining space — something the plain numbered scale (grid-cols-1 through grid-cols-12) can't express on its own. The "Arbitrary Values" lesson later in this course covers this square-bracket syntax in more depth.

Choosing between flex and grid

A rule of thumb: reach for flex when you're arranging items along one direction and want them to size based on their content (a toolbar, a list of tags, a button group); reach for grid when you're defining an explicit two-dimensional structure with rows and columns that items should snap into (a dashboard, a card gallery, a page layout with a sidebar).