Tailwind grid

Tailwind’s grid utility turns an element into a CSS Grid container. It provides a set of classes that enable you to define grid containers, grid columns, and grid rows, allowing you to create responsive and flexible grid layouts for your web applications.

How to Set a Tailwind grid Container

To create a tailwind grid container, you can use the grid class. This class sets the display property of the element to grid and enables grid behavior. By default, the grid container has a single implicit grid track in each direction.

<div class="grid">
	<div class=" ">A</div>
	<div class=" ">B</div>
	<div class="...">C</div>
	<div class=" ">D</div>
	<div class=" ">E</div>
	<div class="...">F</div>
</div>

Preview

Tailwing Grid Rows

To define the tailwind grid rows within a grid container, you can use the grid-rows-{n} class, where {n} is the number of desired rows. This class evenly distributes the available space among the specified number of rows.

<div class="grid grid-rows-3">
	<div class=" ">A</div>
	<div class=" ">B</div>
	<div class="...">C</div>
	<div class=" ">D</div>
	<div class=" ">E</div>
	<div class="...">F</div>
</div>

Preview

Tailwind Grid columns

To define the tailwind grid columns within a grid container, you can use the grid-cols-{n} class, where {n} is the number of desired columns. This class evenly distributes the available space among the specified number of columns

<div class="grid grid-cols-3">
	<div class=" ">A</div>
	<div class=" ">B</div>
	<div class="...">C</div>
	<div class=" ">D</div>
	<div class=" ">E</div>
	<div class="...">F</div>
</div>

Preview

Responsive Tailwind Grid

Tailwind CSS provides responsive utility classes for creating grids, allowing you to define different grid layouts at different breakpoints. To use responsive tailwind grid classes, you can append the breakpoint prefix to the grid classes. For example, md:grid-cols-2 sets the number of grid columns to 2 starting from the medium breakpoint and above.

<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4">
	<img class=" " />
	<img class=" " />
	<img class="..." />
	<img class=" " />
</div>

Preview

Interaction States (Hover/Focus)

Grid layout doesn’t respond to interaction states itself, but child items can. You might change column spans or visibility on hover with group-hover.

<div
	class="group grid grid-cols-2 hover:grid-cols-3 transition-all duration-300"
>
	<div class="col-span-1 bg-gray-200 p-4">Hover me</div>
	<div class="col-span-1 bg-gray-400 p-4">Child</div>
</div>

Preview

⚠️ This should be used cautiously — layout shifts can disrupt UX.

Arbitrary Values

Need a quick custom column count?

<div
	class="grid [grid-template-columns:repeat(auto-fit,minmax(150px,1fr))] gap-4"
>
	<!-- Auto-fit items -->
</div>

Preview

Useful when building dynamic grid systems without bloating config.

Customization in tailwind.config.js

Extend grid columns or rows as needed:

// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			gridTemplateColumns: {
				layout: "200px 1fr",
			},
		},
	},
};

<div class="grid grid-cols-layout gap-4">
	<aside class="bg-gray-100 h-80 w-40">
		Sidebar
		<ul class="mt-10 flex-col justify-around items-center">
			<li class="m-4 hover:bg-gray-200 p-1 text-center hover:cursor-pointer">
				Home
			</li>
			<li class="m-4 hover:bg-gray-200 p-1 text-center hover:cursor-pointer">
				Content
			</li>
			<li class="m-4 hover:bg-gray-200 p-1 text-center hover:cursor-pointer">
				Contact
			</li>
		</ul>
	</aside>
	<main class="bg-white">
		<h1>Here is the content area</h1>
	</main>
</div>

Preview

Real UI Examples

🗂️Responsive Feature Grid

<section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
	<div class="bg-white p-6 shadow rounded">Analytics</div>
	<div class="bg-white p-6 shadow rounded">User Management</div>
	<div class="bg-white p-6 shadow rounded">Security</div>
	<div class="bg-white p-6 shadow rounded">Billing</div>
	<div class="bg-white p-6 shadow rounded">Notifications</div>
	<div class="bg-white p-6 shadow rounded">Reports</div>
</section>

Preview

🧱 Masonry-style Auto Row Grid

<div class="grid grid-cols-2 md:grid-cols-4 auto-rows-min gap-4">
	<div class="bg-pink-200 p-4 row-span-2">Tall Box</div>
	<div class="bg-pink-100 p-4">Short Box</div>
	<div class="bg-pink-300 p-4">Short Box</div>
	<div class="bg-pink-400 p-4 row-span-2">Another Tall Box</div>
</div>

Preview

Admin Panel Layout

<div class="grid grid-cols-[250px_1fr] h-screen">
	<aside class="bg-gray-900 text-white p-6">Sidebar</aside>
	<main class="p-6 bg-gray-50 overflow-auto">Dashboard content</main>
</div>

Preview

Best Practices

• Use grid when you need two-dimensional layout control (columns + rows).

• Prefer flex for one-directional layout needs.

• Use gap instead of space-x/y-* inside grid containers.

• Keep grid column counts readable and maintainable.

• Favor auto-fit and minmax() for dynamic responsive grids.

Accessibility Notes

• Grid is layout-only — it doesn’t affect semantics. However:

• Maintain a logical DOM order; screen readers follow that order.

• Avoid drastic layout shifts on interaction.

• If grid items represent a list (e.g. cards), use <ul> and <li> or <section> for semantics.

Tailwind Grid Column Class Table

Tailwind Grid Rows Class Table

📚 Keep Exploring

• Tailwind grid row

• Tailwind grid column