Grid Layouts
CSS Grid is perfect for two-dimensional layouts. Let's master it with Tailwind.
Basic Grid
<!-- Enable grid with 3 columns -->
<div class="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>1
2
3
4
5
6
Grid Columns
Create columns with grid-cols-:
<div class="grid grid-cols-2 gap-4">2 columns</div>
<div class="grid grid-cols-4 gap-4">4 columns</div>grid-cols-2
1
2
3
4
grid-cols-4
1
2
3
4
Column Span
Make items span multiple columns:
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2">Spans 2 columns</div>
<div>1 col</div>
<div>1 col</div>
<div class="col-span-4">Spans all 4 (full width)</div>
</div>col-span-2
1
1
1
col-span-3
col-span-4 (full width)
Row Span
Make items span multiple rows:
<div class="grid grid-cols-3 gap-4">
<div class="row-span-2">Spans 2 rows</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>row-span-2
1
2
3
4
Gap
Control spacing between grid items:
<!-- Equal gap all around -->
<div class="grid grid-cols-3 gap-4">...</div>
<!-- Different column and row gaps -->
<div class="grid grid-cols-3 gap-x-8 gap-y-2">...</div>gap-2
1
2
3
4
5
6
gap-6
1
2
3
4
5
6
Practical Examples
Dashboard Layout
<div class="grid grid-cols-4 gap-4">
<!-- Header spans all columns -->
<header class="col-span-4 bg-white p-4 rounded-lg shadow">
Dashboard
</header>
<!-- Sidebar -->
<aside class="bg-white p-4 rounded-lg shadow">
Navigation
</aside>
<!-- Main content spans 3 columns -->
<main class="col-span-3 bg-white p-6 rounded-lg shadow">
Main content
</main>
</div>Welcome back!
Your dashboard content goes here...
Card Grid
<div class="grid grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow p-6">Card 1</div>
<div class="bg-white rounded-xl shadow p-6">Card 2</div>
<div class="bg-white rounded-xl shadow p-6">Card 3</div>
</div>
1
Feature One
Description text
2
Feature Two
Description text
3
Feature Three
Description text
Image Gallery with Spans
<div class="grid grid-cols-4 gap-2">
<div class="col-span-2 row-span-2">Large image</div>
<div>Small 1</div>
<div>Small 2</div>
<div>Small 3</div>
<div>Small 4</div>
</div>
Featured
Key Takeaways
- grid: Enables grid layout
- grid-cols-: Defines number of columns (1-12)
- col-span-: Makes items span columns
- row-span-: Makes items span rows
- gap-*: Adds space between items
- Grid is best for 2D layouts, Flexbox for 1D
Next, let's make everything responsive!