CssHow-ToBeginner · 3 min read

How to Use grid-row in CSS: Syntax and Examples

The grid-row property in CSS sets a grid item's vertical start and end lines within a grid container. You specify it using grid-row: start / end; where start and end are line numbers or named lines to control the item's vertical span.

📐

Syntax

The grid-row property defines where a grid item starts and ends vertically inside a grid container.

start: The grid line where the item begins (can be a number or a named line).
end: The grid line where the item ends (can be a number, named line, or span keyword).

Format: grid-row: start / end;

css

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

💻

Example

This example shows a grid container with three rows. The second item is placed to start at row line 2 and span 2 rows vertically using grid-row.

css

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}
.container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 220px;
  margin: 20px;
  border: 2px solid #333;
}
.item {
  background-color: #4CAF50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 4px;
}
.item2 {
  grid-row: 2 / span 2;
  background-color: #2196F3;
}

Output

⚠️

Common Pitfalls

Common mistakes when using grid-row include:

Using invalid line numbers or forgetting that grid lines start at 1, not 0.
Not specifying both start and end lines correctly, causing unexpected item placement.
Confusing span usage; span 2 means the item covers 2 rows starting from the start line.

Always check your grid container's row setup to match your grid-row values.

css

/* Wrong: Using 0 as line number (invalid) */
.item {
  grid-row: 0 / 2; /* No line 0 in grid */
}

/* Correct: Start at line 1 */
.item {
  grid-row: 1 / 2;
}

📊

Quick Reference

Property	Description	Example
grid-row	Sets vertical start and end lines of a grid item	grid-row: 1 / 3;
grid-row-start	Sets vertical start line	grid-row-start: 2;
grid-row-end	Sets vertical end line	grid-row-end: span 2;
span keyword	Makes item span multiple rows	grid-row: 2 / span 2;

✅

Key Takeaways

Use grid-row: start / end; to control vertical placement of grid items.

Grid lines start at 1, never 0; invalid lines cause no effect.

The span keyword lets items cover multiple rows easily.

Check your grid container's row setup to match your grid-row values.

Specify both start and end lines for predictable grid item placement.