CSS - grid-row Property

Quiz

CSS grid-row is a shorthand property used to control the placement of a grid item within the grid container in the row direction by specifying a line, a span, or relying on automatic placement. It is a shorthand for the individual grid-related properties: grid-row-start and grid-row-end.

Syntax

grid-row: auto | grid-row-start / grid-row-end;

Property Values

Value	Description
auto	It size of the elements depends on the content or available space.
grid-row-start	It specifies the start position of a grid item within the grid rows.
grid-row-end	It specifies on which row-line to stop showing the item or how many rows to span.

Examples of CSS Grid row Property

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

Grid Row Property with Auto Value

To let the size of the grid elements be determined automatically based on their content or the available space, we use the auto value. It allows the grid item to size itself according to its content or to fit within the available grid space. 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: auto;
      }
   </style>
</head>

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

</html>

Grid Row Property with Integer Values

To determine the size of the grid elements in terms of the rows of the grid container, we specify the starting row-line number and ending row-line number. Based on the specified values, the size of the element will be adjusted. 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: 1 / 3;
      }

      .item2 {
         grid-row: 2 / 3;
      }

   </style>
</head>

<body>
   <h2>
      CSS grid-row property
   </h2>
   <h4>
      grid-row: 1 / 3 (item1),
      and 2/3 (item2)
   </h4>
   <p>
      item1- starts at row-line 1
      and ends at row-line 3
   </p>
   <p>
      item2- starts at row-line 2
      and ends at row-line 3
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item item2 items">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item">
         Item 5
      </div>
   </div>
</body>

</html>

Grid Row Property with Span Values

To determine the size of the grid elements, we can specify the number of rows space it will occupy by using span (e.g. span 2-element will take 2 rows space). 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: span 3;
      }

      .item2 {
         grid-row: 2 / span 2;
      }

   </style>
</head>

<body>
   <h2>
      CSS grid-row property
   </h2>
   <h4>
      grid-row:span 3 (item1), 
      2 / span 2 (item2)
   </h4>
   <p>
      item1- starts at row-line 1
      and spans 3 rows
   </p>
   <p>
      item2- starts at row-line 2
      and spans 2 rows
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item item2 items">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item">
         Item 5
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
grid-row	57	16	52	10	44

css_reference.htm

Print Page