Tailwind CSS Course
Tailwind CSS
/
Intermediate

Grid Rows

Definition

Utilities for specifying the number of rows in a grid layout.

Explain Like I'm New

Just like columns, but for horizontal slices. Often used when you want a highly specific, static layout like a 'Bento Box' design.

Real World Example

Creating a calendar widget where you explicitly need a 7x5 grid (7 columns for days of the week, 5 rows for the weeks in the month).

Common Use Cases

  • •Calendars
  • •Bento UI layouts
  • •Game boards

Interactive Example

 Interview Questions
basic
  • What class specifies that a grid should have exactly 3 rows?
intermediate
  • Why is `grid-cols-*` used 99% of the time, while `grid-rows-*` is rarely used?
Flash Cards
Question
3 rows?
Click to reveal answer
Answer
`grid-rows-3`
Question
Why rarely used?
Click to reveal answer
Answer
Because the web naturally scrolls vertically. It is much easier to define columns and let the rows automatically generate themselves (`auto-rows`) as content is added, rather than hardcoding a rigid vertical height.