Tailwind CSS Flexbox and Grid
Tailwind has short classes for all the Flexbox and Grid properties you learned in CSS.
Flexbox Classes
| Class | CSS |
|---|---|
flex | display: flex |
flex-row, flex-col | flex-direction |
justify-start, justify-center, justify-end, justify-between | justify-content |
items-start, items-center, items-end, items-stretch | align-items |
flex-wrap | flex-wrap: wrap |
gap-4 | gap: 1rem |
flex-1 | Grow to fill free space |
shrink-0 | Never shrink |
A Navbar with Flexbox
Example
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<nav class="flex justify-between items-center bg-slate-800 text-white px-6 py-4">
<span class="text-xl font-bold">Hafiz Mobiles</span>
<div class="flex gap-6">
<a href="#" class="text-slate-300">Phones</a>
<a href="#" class="text-slate-300">Repairs</a>
<a href="#" class="text-slate-300">Contact</a>
</div>
</nav>
<div class="flex items-center gap-4 p-6">
<div class="size-14 shrink-0 rounded-full bg-cyan-500"></div>
<div class="flex-1">
<p class="font-bold">Order #1042</p>
<p class="text-gray-500 text-sm">Screen replacement, ready on Friday</p>
</div>
<span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm">Paid</span>
</div>
</body>
</html>In the second row, the circle keeps its size (shrink-0), the text takes the free space (flex-1), and the badge stays on the right.
Centring with Flexbox
Example
html
<div class="flex justify-center items-center h-64">
<p>I am in the exact centre</p>
</div>Grid Classes
| Class | CSS |
|---|---|
grid | display: grid |
grid-cols-3 | Three equal columns |
grid-rows-2 | Two equal rows |
col-span-2 | Item spans two columns |
col-span-full | Item spans every column |
gap-4, gap-x-4, gap-y-8 | Space between cells |
A Product Grid
Example
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-6">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-3 bg-cyan-600 text-white p-6 rounded-lg text-xl font-bold">Winter Sale: up to 40% off</div>
<div class="bg-white p-4 rounded-lg shadow-sm">
<p class="font-semibold">Hoodie</p>
<p class="text-cyan-700">Rs 2,200</p>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm">
<p class="font-semibold">Shawl</p>
<p class="text-cyan-700">Rs 1,800</p>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm">
<p class="font-semibold">Gloves</p>
<p class="text-cyan-700">Rs 650</p>
</div>
<div class="col-span-2 bg-white p-4 rounded-lg shadow-sm">Free delivery in Karachi on orders over Rs 3,000</div>
<div class="bg-amber-200 p-4 rounded-lg">Gift wrap</div>
</div>
</body>
</html>The banner spans all three columns. The delivery note spans two.
Grid with a Fixed Sidebar
For column sizes that are not equal, use an arbitrary value:
Example
html
<div class="grid grid-cols-[220px_1fr] gap-6">
<aside>Sidebar</aside>
<main>Main content</main>
</div>Inside square brackets, an underscore _ stands for a space.
Use Flexbox for things in one line, such as a navbar or a row inside a card. Use Grid for cards in rows and columns, galleries and page layouts.
Exercise
Exercise
Which classes make a grid with four equal columns?