CSS grid-row-end Property

The CSS grid-row-end property sets where a grid item ends along the block (row) axis. You give it either a row line to stop at, a span that says how many rows the item should cover, or auto to let the browser place it automatically. Together with grid-row-start, it defines the block-start and block-end edges of the item's grid area.

How row grid lines are numbered

A grid is bounded by numbered lines, not by the tracks (rows) themselves. A grid with three rows has four horizontal lines: line 1 runs along the top edge, line 4 along the bottom edge.

line:  1 ─────────────────────
         |  row 1             |
line:  2 ─────────────────────
         |  row 2             |
line:  3 ─────────────────────
         |  row 3             |
line:  4 ─────────────────────

grid-row-end refers to one of these lines:

grid-row-end: 3 makes the item end at line 3 — it occupies rows 1 and 2 if it starts at line 1.
grid-row-end: span 2 makes the item end 2 rows after wherever it starts, regardless of the absolute line number.

You can also count from the end with negative numbers: -1 is the last line (the bottom edge), -2 is the one above it. So grid-row-end: -1 always reaches the bottom of the explicit grid no matter how many rows it has — handy for "full-height" items.

Tip: the value only describes where the item stops. Where it begins comes from grid-row-start (or auto-placement). The shorthand grid-row sets both at once — for example, grid-row: 1 / 3 places the item from row line 1 to row line 3, spanning two rows.

Initial Value	auto
Applies to	Grid items.
Inherited	No.
Animatable	Yes.
Version	CSS Grid Layout Module Level 1
DOM Syntax	`object.style.gridRowEnd = "4";`

Syntax

grid-row-end: auto | <integer> | span <integer> | inherit | initial | unset;

Example: line number value

The default value auto makes an item occupy a single row. Setting grid-row-end: 3 on an item that starts at line 1 (the default) makes it span the first two rows — the item's bottom edge lands on line 3.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row-end: 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Try it Yourself »

Result

![CSS grid-row-end with multiple items](/uploads/media/default/0001/04/260b91923438edb01b18d93650fd3050e244dd52.png "CSS grid-row-end example" =420x)

Item 1 ends at grid line 3, so it stretches across the first two rows while the remaining items flow around it. In the next example, the same effect is achieved with the span keyword instead of a fixed line number.

Example: span value

Using span is handy when you care about how many rows an item covers rather than the exact line it ends on. grid-row-end: span 3 means the item extends three rows downward from wherever it starts.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row-end: span 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div class="box">2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Try it Yourself »

With grid-row-end: span 3, item 2 keeps its automatic start line and extends three rows downward, regardless of which absolute line that lands on.

Values

Value	Description
`auto`	The item spans a single row (auto-placement). This is the default.
`span n`	The item ends `n` rows after its start line.
`<integer>`	A positive or negative row line number where the item should end. Negative integers count from the end of the grid (`-1` = last line).
`initial`	Sets the property to its default value (`auto`).
`inherit`	Inherits the value from the parent element.
`unset`	Removes the current value, reverting to inherited or initial.

Common pitfalls

span is relative; line numbers are absolute. grid-row-end: 3 always stops at line 3; grid-row-end: span 3 stops three rows past the start line. Mixing them up is the most common grid placement bug.
End before start? The browser swaps them. If grid-row-end resolves to a line before grid-row-start, the browser swaps the two values automatically so the area remains valid.
Setting only grid-row-end does not move the start. The start line is still auto-placed. To pin both edges, use the grid-row shorthand (grid-row: 1 / 3) or also set grid-row-start.
Negative values only reach the explicit grid. -1 points to the final line of the grid defined by grid-template-rows; it does not extend into implicitly created rows.
Explicit width/height is usually unnecessary. Grid layout sizes items automatically within their assigned cells.

grid-row-start — the line where the item begins on the row axis.
grid-row — shorthand that sets both start and end row lines at once.
grid-column-end — the column-axis counterpart of this property.
grid-template-rows — defines the row tracks and the lines between them.
grid-area — sets all four placement lines (row-start, column-start, row-end, column-end) in one declaration.
grid-auto-rows — controls the size of implicitly created row tracks when items overflow the explicit grid.

Practice

What does the 'grid-row-end' CSS property do?

It defines the line where a grid item's end side within the grid ends horizontally.It defines the line where a grid item's end side within the grid ends vertically.It aligns the items within the grid vertically.It controls the space between two rows in the grid.