Tailwind Grid Row

Tailwind provides grid-row utilities to control how elements are positioned across rows in a grid layout. You can span elements across multiple rows, start them on specific rows, or position them dynamically using responsive and arbitrary values.

How to apply grid rows in tailwind CSS

In Tailwind CSS, you can define the number of grid rows in your grid container using the grid-rows-{n} utility, where {n} is the number of rows.

For example, to create a grid container with three rows, you would use the grid-rows-3 class:

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

Preview

In this example, the grid container has three grid items, each occupying one grid row.

Spanning Across Multiple Grid Rows

You can also span an item across multiple grid rows using the row-span-{n} utility, where {n} is the number of rows to span across.

Let's modify the previous example and make the second item span across two rows:

<div class="grid grid-rows-3">
	<div>A</div>
	<div class="row-span-2">B</div>
	<div>C</div>
</div>

Preview

Now, the second item will take up two rows, spanning from the second row to the third row.

Interaction State Use (hover/focus)

Grid row utilities are layout-only, so hover: and focus: don't typically apply. Use interaction states to style content inside the grid cells, not to control their layout.

Arbitrary Value Usage

Tailwind supports arbitrary values for fine control:

<div
	class="grid row-start-[4] row-span-[2] space-y-4 bg-teal-50 p-4 text-center text-white font-bold"
>
	<div class="bg-teal-300">A</div>
	<div class="bg-teal-300">B</div>
	<div class="bg-teal-300">C</div>
	<div class="bg-teal-300">D</div>
</div>

Preview

Useful when your grid has many rows or when working with dynamic layout designs like calendars.

Customizing Grid Rows

If the default grid row classes do not meet your needs, Tailwind allows you to extend the default configuration via the tailwind.config.js file. You can add custom grid row configuration like so:

module.exports = {
	theme: {
		extend: {
			gridTemplateRows: {
				custom: "repeat(4, minmax(0, 1fr))",
			},
		},
	},
};

In this example, a custom grid row configuration named custom was added, which creates a grid with four rows of equal size. You can use it just like the default classes:

<div class="grid grid-cols-3 grid-rows-custom">
	<div class="bg-white p-4 rounded shadow ">Basic</div>
	<div class="bg-white p-4 rounded shadow ">Pro</div>
	<div class="bg-white p-4 rounded shadow">Enterprise</div>
</div>

Preview

💡 7. Real UI Component Example: Calendar Grid

<div class="grid grid-rows-6 grid-cols-7 gap-2 h-[600px]">
	<!-- Time Labels -->
	<div class="row-span-full col-span-1 bg-gray-100 p-2 text-sm text-gray-700">
		8:00<br />9:00<br />10:00<br />...
	</div>

	<!-- Meeting Slot -->
	<div
		class="col-start-2 row-start-2 row-span-2 bg-blue-500 text-white rounded-md p-2"
	>
		Team Standup
	</div>

	<!-- Another Slot -->
	<div
		class="col-start-4 row-start-4 row-span-1 bg-green-500 text-white rounded-md p-2"
	>
		1-on-1
	</div>
</div>

Preview

This is perfect for calendar layouts, scheduler apps, or drag-and-drop UI where precision in row/column positioning is key.

Best Practices

• Use grid-rows-{n} to define row tracks on the parent container first.

• Prefer named utilities (row-span-2) over arbitrary ones unless needed.

• Combine with grid-cols-_ and col-span-_ for full layout control.

• Consider wrapping grid layouts in overflow-auto if heights grow unexpectedly.

Tailwind CSS Grid row Class Table

📚 Ready to Keep Going?

• Tailwind CSS Grid Row Start/End