Tailwind Grid Row Start/End

The grid-row-start and grid-row-end utilities in Tailwind control where an element’s row starts and ends within a CSS Grid layout. They define how many rows an element spans or where it’s positioned vertically.

How to apply Tailwind Grid Row Start/End

To apply row start and end positions to a grid item, you can use the tailwind row-{start/end}-{line} utility classes, where {start/end} represents the desired start and end positions, and {line} represents the line number or name of the grid track.

<div class="h-64 grid grid-rows-3 grid-flow-col gap-4">
	<div class="bg-blue-500 row-start-1 row-end-2">Item 1</div>
	<div class="bg-blue-500">Item 2</div>
	<div class="bg-blue-500 row-span-2">Item 3</div>
</div>

Preview

Responsive Tailwind Grid Row Start/End

Tailwind CSS allows you to apply row start and end positions responsively at different breakpoints. To use responsive tailwind grid row start/end classes, you can append the breakpoint prefix to the utility classes. For example, md:grid-row-start-2 sets the start position to the second row starting from the medium breakpoint and above. Here's an example:

<div class="grid grid-cols-2 md:grid-cols-3">
	<div class="bg-indigo-500 md:grid-row-start-2 md:grid-row-end-4">Item 1</div>
	<div class="bg-indigo-500">Item 2</div>
	<div class="bg-indigo-500">Item 3</div>
</div>

Preview

In the above example, a grid container with 2 columns by default (grid-cols-2) and 3 columns starting from the medium breakpoint and above (md:grid-cols-3) is created. The md:grid-row-start-2 class is applied to the first grid item (Item 1) to specify that it should start at the second row from the medium breakpoint, and the md:grid-row-end-4 class is used to specify that it should end at the fourth row.

Arbitrary Value Usage

You can set custom start/end values with arbitrary syntax:

<div class="grid grid-rows-[repeat(6,minmax(0,1fr))]">
	<div class="row-start-[2] row-end-[5] bg-purple-300">Custom lines</div>
</div>

Preview

Useful when you’re working with dynamic or non-standard grid templates.

Customization in tailwind.config.js

Extend grid row utilities to match your design system:

module.exports = {
	theme: {
		extend: {
			gridRowStart: {
				13: "13",
			},
			gridRowEnd: {
				13: "13",
			},
		},
	},
};

Now you can use:

<div class="row-start-13 row-end-13"></div>

Real UI Component Example

Event Schedule Layout

<div class="grid grid-rows-[repeat(12,minmax(0,1fr))] gap-2 h-[600px]">
	<div class="bg-blue-200 row-start-1 row-end-4 p-2 rounded">
		<h3 class="font-bold">Morning Standup</h3>
		<p>9:00 - 10:30 AM</p>
	</div>
	<div class="bg-green-200 row-start-4 row-end-7 p-2 rounded">
		<h3 class="font-bold">Project Review</h3>
		<p>10:30 AM - 12:00 PM</p>
	</div>
	<div class="bg-yellow-200 row-start-7 row-end-9 p-2 rounded">
		<h3 class="font-bold">Lunch Break</h3>
	</div>
	<div class="bg-purple-200 row-start-9 row-end-12 p-2 rounded">
		<h3 class="font-bold">Design Workshop</h3>
	</div>
</div>

Preview

This design makes it easy to visualize a calendar or scheduler UI.

Best Practices

• Use row-span for simple spans and row-start/row-end for precise control.

• Keep grid templates explicit in grid-template-rows for maintainability.

• Avoid overusing arbitrary values unless necessary — it can reduce clarity.

• Combine with col-start/col-end for full two-dimensional control.

Tailwind Grid Row start/end Class Table

📚 Ready to Keep Going?

• Tailwind grid row