Grid System in Tailwind CSS 4 – Complete Guide

The CSS Grid system is a powerful layout technique used to create two-dimensional layouts with rows and columns.

Unlike Flexbox (which works mainly in one direction), Grid allows you to control both rows and columns at the same time.

Tailwind CSS provides utility classes that make creating grid layouts extremely simple.

In this guide you will learn:

Grid container basics
Grid columns
Grid rows
Column span
Row span
Start and end lines
Responsive grid layouts

We will use the Tailwind CSS 4 CDN.

https://unpkg.com/@tailwindcss/browser@4

Step 1: Setup Tailwind CSS CDN

Create a basic HTML file.

<!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 you can use Tailwind grid utilities.

Grid Container

To create a grid container, use:

grid

Example:

<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 container
grid-cols-3 → 3 columns
gap-4 → spacing between items

Grid Columns

Grid columns define how many columns appear in the layout.

Example – 3 Column Grid

<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

Column Span (col-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:

spans two columns.

Column Start & End

You can control where elements start and end.

Example

<div class="grid grid-cols-6 gap-4 bg-gray-100 p-4">

<div class="col-span-4 col-start-2 bg-blue-500 text-white p-4">
01
</div>

<div class="col-start-1 col-end-3 bg-green-500 text-white p-4">
02
</div>

<div class="col-span-2 col-end-7 bg-red-500 text-white p-4">
03
</div>

<div class="col-start-1 col-end-7 bg-purple-500 text-white p-4">
04
</div>

</div>

This allows precise layout control.

Grid Rows

Grid rows define the vertical structure of the grid.

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.

Row Span

row-span allows elements to span multiple rows.

Example

<div class="grid grid-flow-col grid-rows-3 gap-4 bg-gray-100 p-4">

<div class="row-span-3 bg-blue-500 text-white p-4">
01
</div>

<div class="col-span-2 bg-green-500 text-white p-4">
02
</div>

<div class="col-span-2 row-span-2 bg-red-500 text-white p-4">
03
</div>

</div>

Here:

row-span-3 → spans 3 rows
row-span-2 → spans 2 rows

Row Start & Row End

You can control row placement.

Example

<div class="grid grid-flow-col grid-rows-3 gap-4 bg-gray-100 p-4">

<div class="row-span-2 row-start-2 bg-blue-500 text-white p-4">
01
</div>

<div class="row-span-2 row-end-3 bg-green-500 text-white p-4">
02
</div>

<div class="row-start-1 row-end-4 bg-red-500 text-white p-4">
03
</div>

</div>

This gives full control of vertical placement.

Custom Grid Values

You can also use custom values.

Example

<div class="col-[16_/_span_16] bg-blue-500 text-white p-4">
Custom Column
</div>

Or using CSS variables.

<div style="--my-columns: span 2 / span 2"
class="col-(--my-columns) bg-blue-500 text-white p-4">
Custom Column Variable
</div>

Responsive Grid Layout

Tailwind allows responsive grid layouts easily.

Example

<div class="grid grid-cols-1 md:grid-cols-3 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>

Behavior:

Screen	Layout
Mobile	1 column
Tablet/Desktop	3 columns

Real Layout Example – Blog Grid

<div class="grid grid-cols-3 gap-6 bg-gray-100 p-6">

<div class="bg-white shadow-lg p-6 rounded">
<h3 class="font-semibold text-lg">Blog Post</h3>
<p class="text-gray-600">Example description</p>
</div>

<div class="bg-white shadow-lg p-6 rounded">
<h3 class="font-semibold text-lg">Blog Post</h3>
<p class="text-gray-600">Example description</p>
</div>

<div class="bg-white shadow-lg p-6 rounded">
<h3 class="font-semibold text-lg">Blog Post</h3>
<p class="text-gray-600">Example description</p>
</div>

</div>

Perfect for:

blog grids
product cards
dashboards

Real Layout Example – Dashboard Grid

<div class="grid grid-cols-4 gap-6 min-h-screen">

<div class="col-span-1 bg-gray-800 text-white p-6">
Sidebar
</div>

<div class="col-span-3 bg-gray-100 p-6">
Main Content
</div>

</div>

Used in admin dashboards.

Why Use Grid in Tailwind?

Two-Dimensional Layouts

Grid controls both rows and columns.

Clean Code

No complex CSS required.

Responsive Design

Easily adapt layouts across screen sizes.

Perfect for Modern UI

Great for dashboards, galleries, and card layouts.

FAQs

What is Grid in Tailwind CSS?

Grid in Tailwind allows developers to create layouts using rows and columns with utility classes.

What is col-span in Tailwind?

col-span allows an element to span multiple grid columns.

Example:

col-span-2

What is row-span in Tailwind?

row-span allows elements to span multiple grid rows.

Example:

row-span-3

What is the difference between Flexbox and Grid?

Feature	Flexbox	Grid
Direction	One-dimensional	Two-dimensional
Best For	Components	Layout structures

Can grid be responsive?

Yes. Tailwind allows responsive grids.

Example:

grid-cols-1 md:grid-cols-3

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Flexbox with Tailwind CSS 4 – Complete Guide (Container, Justify, Align, Direction, Gap & Layout Examples)

Next: Grid System in Tailwind CSS 4 – Columns, Rows, Gap, Span & Responsive Layouts

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.

Grid System in Tailwind CSS 4 – Complete Guide

Step 1: Setup Tailwind CSS CDN

Grid Container

Grid Columns

Example – 3 Column Grid

Column Span (col-span)

Example – col-span-2

Column Start & End

Example

Grid Rows

Example – Grid Rows

Row Span

Example

Row Start & Row End

Example

Custom Grid Values

Example

Responsive Grid Layout

Example

Real Layout Example – Blog Grid

Real Layout Example – Dashboard Grid

Why Use Grid in Tailwind?

Two-Dimensional Layouts

Clean Code

Responsive Design

Perfect for Modern UI

FAQs

What is Grid in Tailwind CSS?

What is col-span in Tailwind?

What is row-span in Tailwind?

What is the difference between Flexbox and Grid?

Can grid be responsive?

Your Feedback

Quick Links

Company