CSS - grid-row-start Property

Quiz

CSS grid-row-start property defines the starting position of a grid item within the grid rows by specifying a line, a span, or relying on automatic placement. It defines block-start edge of the grid area.

Syntax

grid-row-start: 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 start.

Examples of CSS Grid row Start Property

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

Grid Row Start Property with Auto Value

To allow the grid item to start at the default position based on the item's content and the grid layout, we use the auto value. It automatically adjusts the start 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-start: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-row-start property
   </h2>
   <h4>
      grid-row-start: 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 Start 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-start: span 2;
      }

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

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

<body>
   <h2>
      CSS grid-row-start property
   </h2>
   <h4>
      grid-row-start: 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>
      item4- 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 Start Property with Row Numbers

To set the grid item's start line explicitly at some row line number where the item should start, we specify the row number (e.g. 4 - the element must be displayed from row 4). 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-start: 2;
      }

      .item3 {
         grid-row-start: 3;
      }

      .item5 {
         grid-row-start: 4;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-row-start property
   </h2>
   <h4>
      grid-row-start: 2 (item1),
      3 (item3), 4 (item5)
   </h4>
   <p>
      item1- the element starts 
      showing from row-line 2
   </p>
   <p>
      item3- the element starts 
      showing from row-line 3
   </p>
   <p>
      item5- the element starts 
      showing from 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">
         Item 4
      </div>
      <div class="grid-item item5 items">
         Item 5
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
grid-row-start	57	16	52	10	44

css_reference.htm

Print Page