CSS - grid-row-end Property

Quiz

CSS grid-row-end property determines the row where a grid item should end by specifying a line, a span, or relying on automatic placement. It defines block-end edge of the grid area.

Syntax

grid-row-end: auto | span n | row-line;

Property Values

Value	Description
auto	It automatically determines the position of the grid item within the grid layout. Deafult span of 1.
span n	It specifies the number of rows space taken by the element.
row-line	It specifies the row on which the display of the element must end.

Examples of CSS Grid row End Property

The following examples explain the grid-row-end property with different values.

Grid Row End Property with Auto Value

To allow the grid item to end at the default position based on the item's content and the grid layout, we use the auto value. It automatically adjusts the end line based on how much space the item needs and its current placement within the grid. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 3px solid blue;
         padding: 20px;
         text-align: center;
         color: white;
         grid-row-end: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-row-end property
   </h2>
   <h4>
      grid-row-end: auto
   </h4>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item item3 items">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item item5 items">
         Item 5
      </div>
   </div>
</body>

</html>

Grid Row End Property with Span Values

To make the the grid item extend from its starting line and span across n number of rows, we specify the number of rows with the span (e.g. span 2- the element spans 2 rows from the starting line). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 2px solid #ff6b6b;
         padding: 20px;
         text-align: center;
         color: white;
      }

      .items {
         border: 3px solid blue;
      }

      .item1 {
         grid-row-end: span 2;
      }

      .item3 {
         grid-row-end: span 3;
      }

      .item4 {
         grid-row-end: span 4;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-row-end property
   </h2>
   <h4>
      grid-row-end: span 2 (item1),
      span 3 (item3), span 4 (item5)
   </h4>
   <p>
      item1- the element takes 
      2 rows space
   </p>
   <p>
      item3- the element takes 
      3 rows space
   </p>
   <p>
      item5- the element takes 
      4 rows space
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item item3 items">
         Item 3
      </div>
      <div class="grid-item item4 items">
         Item 4
      </div>
      <div class="grid-item">
         Item 5
      </div>
   </div>
</body>

</html>

Grid Row End Property with Row Numbers

To set the grid item's end line explicitly at some row line number where the item should end irrespective of the starting line, we specify the row number (e.g. 3 - the element must be displayed till row-line 3). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 2px solid #ff6b6b;
         padding: 20px;
         text-align: center;
         color: white;
      }

      .items {
         border: 3px solid blue;
      }

      .item1 {
         grid-row-end: 3;
      }

      .item3 {
         grid-row-end: 4;
      }

      .item4 {
         grid-row-end: 5;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-row-end property
   </h2>
   <h4>
      grid-row-end: 3 (item1),
      4 (item3), 5 (item5)
   </h4>
   <p>
      item1- the display of the
      item ends at row-line 2
   </p>
   <p>
      item3- the display of the 
      item ends at row-line 3
   </p>
   <p>
      item5- the display of the 
      item ends at row-line 4
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item item3 items">
         Item 3
      </div>
      <div class="grid-item item4 items">
         Item 4
      </div>
      <div class="grid-item">
         Item 5
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
grid-row-end	57	16	52	10	44

css_reference.htm

Print Page