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>