Grid

1 min read | Tailwind CSS Tutorial

⭐

Want the full learning experience?

Get structured courses, certificates, projects, and instructor support with LabsICT Pro.

CSS Grid is the most powerful layout system in CSS, and Tailwind makes it accessible with simple utility classes. Grid lets you create two-dimensional layouts — rows and columns simultaneously — which is something flexbox can't do alone.

Enabling grid

Apply grid to a container to make it a grid container. Its direct children become grid items.


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

Grid vs flex

Use grid when you need to control both rows and columns at the same time. Use flex when you're laying out items in a single direction. Grid is better for page layouts and complex dashboards. Flex is better for navigation bars and single-row/card layouts.

Responsive grid

Combine grid with responsive prefixes to change column counts at different breakpoints.


<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-lg shadow p-6">Card 1</div>
  <div class="bg-white rounded-lg shadow p-6">Card 2</div>
  <div class="bg-white rounded-lg shadow p-6">Card 3</div>
</div>

Tools & Setup