CSS grid-row-start

The CSS grid-row-start property is used to define the starting row position of a grid item in grid layout. For example:

HTML with CSS Code
<!DOCTYPE html>
      div.xyz {display: grid; gap: 4px; grid-template-columns: auto auto auto;}
      div.xyz > div {border: 1px solid crimson; padding: 10px; text-align: center;}
      #one {grid-row-start: 2;}

   <div class="xyz">
      <div id="one">A</div>

In above example, the grid item whose id is one starts from or placed at 2nd row.

Note - The grid as the value of display property, is used to make an element as a block level grid container.

Note - The gap property is used to define the gap between rows and columns in grid layout.

Note - The grid-template-columns is used to define the number of columns to create in grid layout.

CSS grid-row-start Syntax

The syntax of grid-row-start property in CSS, is:

grid-row-start: auto|rowLineNumber;

The auto is the default value of grid-row-start property.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!