CSS Grid Layout with Tailwind

Tailwind provides a comprehensive set of CSS Grid utilities that make complex two-dimensional layouts straightforward to build. Enabling grid on a container exposes the grid-cols-* utilities which set the number of equal columns: grid-cols-1 through grid-cols-12, plus grid-cols-none. The gap, gap-x, and gap-y utilities work identically to their flex equivalents, controlling gutter space between cells. Column and row spanning is handled by col-span-* and row-span-* utilities. col-span-2 makes an item occupy two columns, col-span-full stretches it across all columns, and col-start-* and col-end-* place items at specific grid lines. Row spanning works similarly with row-span-* utilities. These span utilities are the key to building asymmetric dashboard layouts and magazine-style article pages. For more control, the grid-cols-[repeat(auto-fill,minmax(200px,1fr))] arbitrary value syntax lets you write CSS Grid template column expressions that respond naturally to the available width without explicit breakpoints — this is the auto-fill / minmax pattern that gives you a truly fluid grid. Tailwind v3 also added auto-* grid utilities: grid-cols-auto, auto-cols-min, auto-cols-max, and auto-cols-fr for implicit grid tracks.

Example

<!-- Basic 3-column grid -->
<div class="grid grid-cols-3 gap-6">
  <div class="bg-white rounded-xl shadow p-4">Card 1</div>
  <div class="bg-white rounded-xl shadow p-4">Card 2</div>
  <div class="bg-white rounded-xl shadow p-4">Card 3</div>
</div>

<!-- Dashboard layout: sidebar + main + panel -->
<div class="grid grid-cols-12 gap-4 min-h-screen p-4">
  <aside class="col-span-2 bg-gray-800 text-white rounded-xl p-4">Sidebar</aside>
  <main class="col-span-7 bg-white rounded-xl p-6">Main content</main>
  <section class="col-span-3 bg-gray-50 rounded-xl p-4">Right panel</section>
</div>

<!-- Featured + supporting articles (spanning) -->
<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <article class="col-span-2 row-span-2 bg-blue-600 text-white rounded-xl p-6">
    Featured article
  </article>
  <article class="bg-white rounded-xl shadow p-4">Article 2</article>
  <article class="bg-white rounded-xl shadow p-4">Article 3</article>
</div>

<!-- Auto-fill fluid grid (no breakpoints needed) -->
<div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))">
  <!-- or with JIT arbitrary value: -->
  <!-- <div class="grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-4"> -->
  <div class="bg-white rounded-xl shadow p-4">Auto card</div>
  <div class="bg-white rounded-xl shadow p-4">Auto card</div>
  <div class="bg-white rounded-xl shadow p-4">Auto card</div>
</div>

<!-- Responsive grid with col-span override -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
  <div class="md:col-span-2 bg-indigo-50 rounded-xl p-6">Wide feature</div>
  <div class="bg-white rounded-xl shadow p-4">Item</div>
  <div class="bg-white rounded-xl shadow p-4">Item</div>
</div>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned