📏 grid-row — Controlling Vertical Placement in CSS Grid

🌐 What is grid-row?

grid-row is a CSS Grid item property used to control thevertical placement of an item within the grid. With this property, you can choose where an item starts and ends across grid row lines — allowing you to create tall cards, hero blocks, sidebars, and complex magazine-style layouts.

>>“grid-row lets you span items vertically with precision — from small tiles to full-height sections.”

📌 Shorthand For

  • grid-row-start
  • grid-row-end

Meaning:grid-row: start / end;

🎯 Basic Syntax

grid-row Syntax

grid-row: <start-line> / <end-line>;

🧪 Example: Spanning Multiple Rows

Two Row Span

.item {
  grid-row: 1 / 3; 
  /* Starts at row line 1 and ends before line 3 → spans 2 rows */
}
Media content

🔥 Using the span Keyword

The span keyword allows an item to extend across a specific number of rows, without needing to specify exact line numbers.

Using span

.item {
  grid-row: span 3; 
  /* Span 3 rows from wherever it is placed */
}

Note

💡 Span is extremely helpful when items are placed automatically by the grid.

📐 Practical Example

Sidebar + Content Layout

.container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: repeat(4, 150px);
  gap: 20px;
}

.sidebar {
  grid-row: 1 / 5; /* full height over 4 rows */
}

.content {
  grid-row: 1 / 3; /* spans first 2 rows */
}

.widget {
  grid-row: 3 / 5; /* bottom section */
}

This creates a sidebar spanning all rows, with content and widgets arranged vertically.

🧠 Understanding Grid Row Lines

Media content
ExpressionMeaning
1 / 2Occupies only the first row
1 / 4Spans 3 rows: 1 → 2 → 3
2 / 5Starts at row 2, spans through row 4
span 2Spans 2 rows from its current line

🧩 Combining grid-row with grid-column

Large Hero Section

.hero {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}

This gives you a hero component spanning multiple rows and columns.

📱 Responsive Example

Responsive grid-row Usage

.card {
  grid-row: span 2; /* taller on mobile */
}

@media (min-width: 900px) {
  .card {
    grid-row: span 1; /* shorter on desktop */
  }
}

Items grow vertically on smaller screens and shrink on larger ones.

⚠️ Common Mistakes

  • Using row numbers that don’t exist
  • Expecting grid-row to work on the grid container (only grid items!)
  • Forgetting that the end line is exclusive (the item stops before that line)
  • Using fixed height rows (px) and expecting flexibility

Note

🧠 Tip: If your grid template has 4 rows, it will automatically have 5 grid row lines.

🔥 Summary

grid-row gives you full control over the vertical positioning and height of grid items. Whether spanning multiple rows or creating a tall sidebar layout, this property unlocks the true 2D power of CSS Grid.

>>“With grid-row, vertical layout becomes effortless — no more floats or absolute positioning.”

Learn more ➜MDN Docs 📘