Tailwind Grid

CSS Grid divides a container into rows and columns. Items placed inside the grid automatically fill the defined cells. Tailwind provides utility classes for every major grid property.

Activating Grid

Add grid to a parent element to turn it into a grid container. Then define how many columns it should have.

<div class="grid grid-cols-3">
  <div>Cell 1</div>
  <div>Cell 2</div>
  <div>Cell 3</div>
  <div>Cell 4</div>
  <div>Cell 5</div>
  <div>Cell 6</div>
</div>

Result:
┌──────────┬──────────┬──────────┐
│  Cell 1  │  Cell 2  │  Cell 3  │
├──────────┼──────────┼──────────┤
│  Cell 4  │  Cell 5  │  Cell 6  │
└──────────┴──────────┴──────────┘

Grid Columns Classes

Class           CSS Output
──────────────────────────────────────────────
grid-cols-1     grid-template-columns: repeat(1, ...)
grid-cols-2     grid-template-columns: repeat(2, ...)
grid-cols-3     grid-template-columns: repeat(3, ...)
grid-cols-4     grid-template-columns: repeat(4, ...)
grid-cols-6     grid-template-columns: repeat(6, ...)
grid-cols-12    grid-template-columns: repeat(12, ...)
grid-cols-none  Removes column definition

Gap in Grid

gap-4     →  Adds 1rem space between all rows and columns
gap-x-4   →  Space between columns only
gap-y-4   →  Space between rows only

<div class="grid grid-cols-3 gap-4">
  ...
</div>

┌──────────┐  ←gap→  ┌──────────┐  ←gap→  ┌──────────┐
│  Cell 1  │         │  Cell 2  │         │  Cell 3  │
└──────────┘         └──────────┘         └──────────┘
     ↑ gap ↑
┌──────────┐         ┌──────────┐         ┌──────────┐
│  Cell 4  │         │  Cell 5  │         │  Cell 6  │
└──────────┘         └──────────┘         └──────────┘

Spanning Multiple Columns

Use col-span- classes on a child element to make it stretch across multiple columns.

col-span-1   →  Takes 1 column
col-span-2   →  Takes 2 columns
col-span-3   →  Takes 3 columns
col-span-full →  Spans all columns

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Wide Cell</div>
  <div>Normal Cell</div>
</div>

┌────────────────────┬──────────┐
│     Wide Cell      │  Normal  │
│   (spans 2 cols)   │   Cell   │
└────────────────────┴──────────┘

Spanning Rows

row-span-1   →  Takes 1 row
row-span-2   →  Takes 2 rows
row-span-3   →  Takes 3 rows

<div class="grid grid-cols-2 gap-4">
  <div class="row-span-2">Tall Cell</div>
  <div>Cell A</div>
  <div>Cell B</div>
</div>

┌──────────┬──────────┐
│          │  Cell A  │
│ Tall     ├──────────┤
│ Cell     │  Cell B  │
└──────────┴──────────┘

Grid Rows Classes

grid-rows-1     →  1 row defined
grid-rows-2     →  2 rows defined
grid-rows-3     →  3 rows defined
grid-rows-none  →  No fixed rows

Grid vs Flexbox — When to Use Which

Use FLEXBOX when:
  • Items flow in one direction (row OR column)
  • Item sizes are flexible and content-driven
  • Example: navigation bar, tag list, button group

Use GRID when:
  • Layout needs rows AND columns simultaneously
  • You want precise two-dimensional placement
  • Example: photo gallery, dashboard layout, article layout

Auto-Fit Responsive Grid

Use grid-cols- with responsive prefixes to change the column count at different screen sizes.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>

Mobile  → 1 card per row
Tablet  → 2 cards per row
Desktop → 4 cards per row