Structure
- Define columns and rows using grid utilities.
What “Grid Structure” Means
A grid structure defines:
How many columns exist
How many rows exist
How content is placed inside them
Unlike Flexbox, Grid does not guess structure.
You explicitly define it.In Tailwind CSS, grid structure is created using column and row utilities that map directly to CSS Grid.
Grid Columns (grid-cols-*)
What Are Grid Columns ?
Grid columns define vertical divisions of the layout.
Think of columns as:
Invisible vertical tracks
A layout skeleton
Syntax:
grid-cols-{number}
Grid Columns Layout
grid-cols-3 creates three equal columns and gap-4 adds spacing between grid items.
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-200 p-4">1</div>
<div class="bg-green-200 p-4">2</div>
<div class="bg-red-200 p-4">3</div>
</div>Meaning:
Grid enabled
3 equal-width columns
Items flow row by row
How Grid Places Items
Grid places items:
Left to right
Top to bottom
Automatically fills each cell
If items exceed columns:
New rows are created automatically
Column Count Variations
Single Column Grid Layout
grid-cols-1 creates one column so items stack vertically.
<div class="grid grid-cols-1">
<div>Item</div>
<div>Item</div>
</div>Used for:
Mobile-first layouts
Vertical stacks
Four Column Grid Layout
grid-cols-4 creates four equal columns and gap-4 adds space between grid items.
<div class="grid grid-cols-4 gap-4">
<div>Card</div>
<div>Card</div>
<div>Card</div>
<div>Card</div>
</div>Used for:
Galleries
Dashboards
Product listings
Grid Rows (grid-rows-*)
What Are Grid Rows ?
Grid rows define horizontal divisions of the layout.
Syntax:
grid-rows-{number}
Rows are less commonly defined explicitly, but very powerful.
Grid Rows Layout
grid-rows-3 creates three horizontal rows and gap-4 adds space between them.
<div class="grid grid-rows-3 h-64 gap-4">
<div class="bg-blue-200">Header</div>
<div class="bg-green-200">Content</div>
<div class="bg-red-200">Footer</div>
</div>Meaning:
3 rows
Equal height rows
Container height must be defined
Columns vs Rows
Feature Columns Rows Direction Vertical Horizontal Common usage Very common Less common Typical use Page layout Header / footer layouts Requires height No Yes Rule:
Rows matter only when height is constrained.
Combining Columns & Rows
Grid with Rows and Columns
grid-cols-3 and grid-rows-2 create a 3×2 grid layout with spacing using gap-4.
<div class="grid grid-cols-3 grid-rows-2 gap-4 h-64">
<div class="bg-blue-200">1</div>
<div class="bg-green-200">2</div>
<div class="bg-red-200">3</div>
<div class="bg-yellow-200">4</div>
<div class="bg-purple-200">5</div>
<div class="bg-pink-200">6</div>
</div>Creates:
3 columns
2 rows
6 total cells
Auto Rows & Auto Columns
If rows or columns are not defined, Grid:
Creates them automatically
Sizes them based on content
This is why:
grid-cols-* → common
grid-rows-* → optional
Responsive Grid Structure
Responsive Grid Layout
grid-cols-1 shows one column on small screens and md:grid-cols-3 switches to three columns on medium screens.
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>Card</div>
<div>Card</div>
<div>Card</div>
</div>Meaning:
Mobile → 1 column
Desktop → 3 columns
Grid Layout
grid-cols-* defines the layout structure and gap-* adds spacing between grid items.
<!-- Dashboard Layout -->
<div class="grid grid-cols-12 gap-6">
<aside class="col-span-3">Sidebar</aside>
<main class="col-span-9">Main Content</main>
</div>
<!-- Card Grid -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white shadow p-4">Card</div>
<div class="bg-white shadow p-4">Card</div>
</div>Common Mistakes
Forgetting grid class
Expecting rows to work without height
Overusing grid for simple layouts
Nesting grids unnecessarily
Not thinking mobile-first
Grid should simplify, not complicate.
Best Practices for Grid Structure
Define columns first
Define rows only when needed
Use gap for spacing
Combine with Flexbox inside cells
Keep grid definitions readable
Design structure before content