CSS grid-row-start Property


The grid-row-start property determines how many lines an element will occupy, or on which line the element starts in the grid layout. In order to determine how many lines an element will occupy, or on which line an element ends in a grid layout, you can use the grid-row-end property.

Initial value
Applies to
Grid items and absolutely-positioned boxes whose containing block is a grid container
Computed value
As specified
JavaScript syntax

Interactive Demo



rid-row-start: auto | line | line-name | span line


  • 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.


<div class="grid-container">
<div class="item-a">A</div>
<div class="grid-container2">
<div class="item-b">B</div>
.grid-container2 {
   display: grid;
   margin-top: 5px; 
   padding: 10px; 
   background: rgb(0,150,208);
   grid-template-rows: [line1] auto  [line2] auto  [line3] auto  [line4] auto; 
.grid-container > div,
.grid-container2 > div { 
   background: rgb(241,101,41); 
   border: 1px solid #000; 
   text-align: center;
.item-a {
   grid-row-start: 2;
   background: red !important;
.item-b {
   grid-row-start: line4;
   background: yellow !important;

Browser Support

The following table will show you the current browser support for the CSS grid-row-start property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024