W3docs
en
Log in

CSS grid-row-end Property

The grid-row-end CSS property defines the end row of the item and the number of rows to span. See the values of grid-row-end property with examples.

The grid-row-end property is used to specify on which row to stop displaying the item or how many rows the item will span.

Note: Explicitly setting width or height on grid items is generally unnecessary, as the grid layout handles sizing automatically.

Initial Valueauto
Applies toGrid items.
InheritedNo.
AnimatableYes.
VersionCSS Grid Layout Module Level 1
DOM Syntaxobject.style.gridRowEnd = "4";

Syntax

CSS grid-row-end syntax

grid-row-end: auto | grid-line | span n | inherit | initial | unset;

Example of the grid-row-end property:

CSS grid-row-end code example

<!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: auto;
      }
    </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

Here, we have specified the grid-row-end property as "auto". In the next example, three rows are spanned.

Example of the grid-row-end property specified as "span 3":

CSS grid-row-end example with multiple items

<!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 »

Values

ValueDescriptionPlay it
autoOnly one row will be spanned. This is the default value of this property.Play it »
span nSpecifies the number of rows to span.Play it »
grid-lineSpecifies the grid line where the item ends.Play it »
initialMakes the property use its default value.
inheritInherits the property from its parent element.

For convenience, you can also use the grid-row shorthand property to set both start and end lines at once.

Practice

Practice

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