Grid Row

Utilities for controlling how elements are sized and placed across grid rows.

CSS Property:grid-row

Classes:42

Grid Row Classes

Class	CSS
`row-auto`	`grid-row: auto;`
`row-span-1`	`grid-row: span 1 / span 1;`
`row-span-2`	`grid-row: span 2 / span 2;`
`row-span-3`	`grid-row: span 3 / span 3;`
`row-span-4`	`grid-row: span 4 / span 4;`
`row-span-5`	`grid-row: span 5 / span 5;`
`row-span-6`	`grid-row: span 6 / span 6;`
`row-span-7`	`grid-row: span 7 / span 7;`
`row-span-8`	`grid-row: span 8 / span 8;`
`row-span-9`	`grid-row: span 9 / span 9;`
`row-span-10`	`grid-row: span 10 / span 10;`
`row-span-11`	`grid-row: span 11 / span 11;`
`row-span-12`	`grid-row: span 12 / span 12;`
`row-span-full`	`grid-row: 1 / -1;`
`row-start-1`	`grid-row-start: 1;`
`row-start-2`	`grid-row-start: 2;`
`row-start-3`	`grid-row-start: 3;`
`row-start-4`	`grid-row-start: 4;`
`row-start-5`	`grid-row-start: 5;`
`row-start-6`	`grid-row-start: 6;`
`row-start-7`	`grid-row-start: 7;`
`row-start-8`	`grid-row-start: 8;`
`row-start-9`	`grid-row-start: 9;`
`row-start-10`	`grid-row-start: 10;`
`row-start-11`	`grid-row-start: 11;`
`row-start-12`	`grid-row-start: 12;`
`row-start-13`	`grid-row-start: 13;`
`row-start-auto`	`grid-row-start: auto;`
`row-end-1`	`grid-row-end: 1;`
`row-end-2`	`grid-row-end: 2;`
`row-end-3`	`grid-row-end: 3;`
`row-end-4`	`grid-row-end: 4;`
`row-end-5`	`grid-row-end: 5;`
`row-end-6`	`grid-row-end: 6;`
`row-end-7`	`grid-row-end: 7;`
`row-end-8`	`grid-row-end: 8;`
`row-end-9`	`grid-row-end: 9;`
`row-end-10`	`grid-row-end: 10;`
`row-end-11`	`grid-row-end: 11;`
`row-end-12`	`grid-row-end: 12;`
`row-end-13`	`grid-row-end: 13;`
`row-end-auto`	`grid-row-end: auto;`

Arbitrary Values

You can use arbitrary values with square bracket notation when you need a specific value not included in the default scale.

row-[span_2]row-[1/3]

Responsive Variants

Apply grid row utilities at specific breakpoints using responsive prefixes.

Breakpoint	Prefix	Example
640px+	`sm:`	`sm:row-auto`
768px+	`md:`	`md:row-auto`
1024px+	`lg:`	`lg:row-auto`
1280px+	`xl:`	`xl:row-auto`
1536px+	`2xl:`	`2xl:row-auto`

Related Utilities

Grid Template Rows

14 classes

grid-template-rows

Grid Column

42 classes

grid-column

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect flexbox, grid, spacing, typography, and more.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →