CSS grid-row-end Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The grid-row-end property determines which horizontal grid line a grid item’s bottom (or end) edge should align with inside a CSS Grid container. It is one half of the line-based placement model for rows: combined with grid-row-start, it establishes the extent of the item along the block (row) axis, and therefore how many row tracks the item occupies. Conceptually it ties a particular edge of the item to a line in the grid’s line index rather than to a particular track size, so changes to track sizing or to the item’s paired start line immediately affect the item’s rendered height/position.

Because grid placement is line-based, grid-row-end interacts closely with shorthand and auto-placement behaviors. When you use the grid-row shorthand the end position is set together with the start; and when the grid’s auto-placement algorithm is active, the resolved end line for an item may be determined by the automatic flow rules rather than an explicit manual placement—see grid-auto-flow for how items are auto-positioned. This property therefore has a different practical effect depending on whether you are manually placing items on named/numbered lines in an explicit grid or letting the grid populate implicitly: manual line references give precise control, while auto-placement delegates final line assignment to the layout engine.

The way grid-row-end spans or anchors an item also affects layout interactions such as overlap, reflow and alignment. When an item occupies multiple row tracks it changes how neighbouring items are positioned and can force implicit tracks to be created if placement extends beyond the explicit grid defined by grid-template-rows. Vertical alignment inside the grid area remains controlled by the item’s alignment properties; for example, the item’s alignment within its occupied area is influenced by align-self. Finally, grid-row-end works in tandem with column-line properties like grid-column-end to fully define a two-dimensional placement rectangle — changing any one of these line-based properties can change the occupied grid area and therefore the overall layout.

Definition

Initial value: auto
Applies to: Grid items and absolutely-positioned boxes whose containing block is a grid container
Inherited: No
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.gridRowEnd

Interactive Demo

grid-row-end: auto;

grid-row-end: 3;

grid-row-end: -1;

grid-row-end: span 3;

One

Two

Three

Syntax

grid-row-end: auto | line | line-name | span line

Values

autoA keyword indicating that the property does not affect the placement of the element in the grid layout (automatic placement, automatic range, or default range of 1). This is the default value.
lineAn integer that corresponds to the initial face of the element in the grid layout (counting the faces is left to right from the left edge of the element, a schematic display at the top of the page). If a negative integer is specified, then the count is in the reverse order, starting from the end edge of the explicit layout grid. A value of 0 is not valid.
line-nameA string value that refers to a named column in a grid layout. The element is located from the initial face of the specified element.
span lineThe span keyword with an integer that determines how many columns the grid element will span. If an integer is omitted, the default value is 1. A negative value or a value of 0 is not valid.

Example

HTML

<div class="grid">

    <div class="item item1">1</div>

    <div class="item item2">2</div>

    <div class="item item3">3</div>

    <div class="item item4">4</div>

    <div class="item item5">5</div>

</div>

CSS

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 80px;
    gap: 12px;
    max-width: 900px;
    margin: 24px auto;
    padding: 12px;
    background: #f6f8fb;
    border-radius: 8px;
}

.item {
    background: #2d3748;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 18px;
}

.item1 {
    background: #1e88e5;
    grid-row-end: span 2; /* spans two row tracks */
}

.item2 {
    background: #43a047;
    grid-row-end: 4; /* ends at grid line 4 */
}

.item3 {
    background: #fb8c00;
    grid-row-end: auto;
}

.item4 {
    background: #8e24aa;
    grid-row-end: span 3;
}

.item5 {
    background: #f44336;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS grid-row-end property. Hover over a browser icon to see the version that first introduced support for this CSS property.