Grid System in Tailwind CSS 4 – Complete Guide
The CSS Grid system is a powerful layout tool used to create modern responsive layouts with rows and columns.
Unlike Flexbox, which works mainly in one direction, CSS Grid works in two dimensions (rows and columns).
Tailwind CSS provides simple utility classes that make building grid layouts fast and efficient.
In this tutorial you will learn:
- Grid container basics
- Grid columns & rows
- Grid gap utilities
- Column span
- Responsive grid layouts
- Dashboard layout example
We will use the Tailwind CSS 4 CDN.
https://unpkg.com/@tailwindcss/browser@4
Step 1: Setup Tailwind CSS CDN
Create a simple HTML file and include the CDN.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<h1 class="text-3xl font-bold mb-6">
Grid System in Tailwind CSS
</h1>
</body>
</html>
Now Tailwind grid utilities are ready to use.
Grid Container
To create a grid layout, use the grid utility.
<div class="grid grid-cols-3 gap-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
</div>
Explanation:
grid→ creates grid containergrid-cols-3→ defines 3 columnsgap-4→ spacing between grid items
Grid Columns & Rows
Grid columns define horizontal layout while rows define vertical layout.
Example – Grid Columns
<div class="grid grid-cols-3 gap-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
<div class="bg-purple-500 text-white p-4">04</div>
<div class="bg-yellow-500 text-white p-4">05</div>
<div class="bg-pink-500 text-white p-4">06</div>
</div>
Result:
01 02 03
04 05 06
Example – Grid Rows
<div class="grid grid-flow-col grid-rows-3 gap-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
</div>
This creates 3 rows in the layout.
Grid Gap
Gap utilities control spacing between rows and columns.
Basic Gap Example
<div class="grid grid-cols-2 gap-6 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
<div class="bg-purple-500 text-white p-4">04</div>
</div>
Here:
gap-6adds spacing between rows and columns.
Row and Column Gap Example
<div class="grid grid-cols-3 gap-x-8 gap-y-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
<div class="bg-purple-500 text-white p-4">04</div>
<div class="bg-yellow-500 text-white p-4">05</div>
<div class="bg-pink-500 text-white p-4">06</div>
</div>
Explanation:
gap-x-8→ horizontal spacinggap-y-4→ vertical spacing
Column Span
col-span allows an element to span multiple columns.
Example – col-span-2
<div class="grid grid-cols-3 gap-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
<div class="col-span-2 bg-purple-500 text-white p-4">
04
</div>
<div class="bg-yellow-500 text-white p-4">05</div>
<div class="bg-pink-500 text-white p-4">06</div>
</div>
Here:
04
spans across two columns.
Responsive Grid Layouts
Tailwind allows responsive grids using breakpoints.
Example
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-blue-500 text-white p-6">Card 1</div>
<div class="bg-green-500 text-white p-6">Card 2</div>
<div class="bg-red-500 text-white p-6">Card 3</div>
<div class="bg-purple-500 text-white p-6">Card 4</div>
</div>
Behavior:
| Screen Size | Layout |
|---|---|
| Mobile | 1 column |
| Tablet | 2 columns |
| Desktop | 4 columns |
This is commonly used for product cards or blog grids.
Dashboard Layout Example
Here is a simple admin dashboard layout using Tailwind Grid.
<div class="grid grid-cols-4 min-h-screen">
<div class="col-span-1 bg-gray-800 text-white p-6">
<h2 class="text-xl font-bold mb-4">Dashboard</h2>
<ul class="space-y-3">
<li>Home</li>
<li>Analytics</li>
<li>Users</li>
<li>Settings</li>
</ul>
</div>
<div class="col-span-3 bg-gray-100 p-6">
<h1 class="text-2xl font-semibold mb-6">
Dashboard Overview
</h1>
<div class="grid grid-cols-3 gap-6">
<div class="bg-white shadow p-6 rounded">
<h3 class="font-semibold">Sales</h3>
<p>$12,000</p>
</div>
<div class="bg-white shadow p-6 rounded">
<h3 class="font-semibold">Users</h3>
<p>1,240</p>
</div>
<div class="bg-white shadow p-6 rounded">
<h3 class="font-semibold">Orders</h3>
<p>320</p>
</div>
</div>
</div>
</div>
Layout structure:
Sidebar | Main Dashboard
Sidebar | Cards Section
Perfect for:
- Admin panels
- Analytics dashboards
- SaaS applications
Why Use Grid in Tailwind?
Two-Dimensional Layouts
Grid controls both rows and columns.
Flexible Layout System
Easily create complex UI layouts.
Responsive Design
Tailwind breakpoints make grids responsive.
Clean and Maintainable Code
Utility classes simplify layout management.
FAQs
What is Grid in Tailwind CSS?
Grid is a layout system that allows developers to create rows and columns using Tailwind utility classes.
What does grid-cols-3 mean?
grid-cols-3 creates three columns in the grid layout.
What is col-span in Tailwind?
col-span allows elements to span multiple columns.
Example:
col-span-2
What is gap in Tailwind grid?
Gap controls the spacing between grid items.
Example:
gap-6
Can Tailwind grids be responsive?
Yes. Tailwind allows responsive grids.
Example:
grid-cols-1 md:grid-cols-3
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.