# grid-row-start property

The `grid-row-start` property specifies a starting position of an element in a grid by rows. The property value can be a positive or negative number. If we specify a positive number, then the starting position of the element is counted from top to bottom. If you specify a negative number, the element will be placed in the reverse order, i.e. from bottom to top.

## Syntax

`selector { grid-row-start: positive or negative number; }`

## Example

Let's give the elements in the grid starting positions:

`<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> </div>` `#parent { display: grid; padding: 10px; width: 400px; border: 2px solid #696989; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-row-start: 1; } #elem2 { grid-row-start: 2; } #elem3 { grid-row-start: 3; }`

:

## Example

Now let's specify negative numbers in the `grid-row-start` property. Now `elem3` will occupy the top row, and `elem1` will occupy the bottom row:

`<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> </div>` `#parent { display: grid; padding: 10px; width: 400px; border: 2px solid #696989; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-row-start: -1; } #elem2 { grid-row-start: -2; } #elem3 { grid-row-start: -3; }`

:

## Example

Let's make the first block occupy two rows. To do this, we need to combine the `grid-row-start` and `grid-row-end` properties:

`<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> </div>` `#parent { display: grid; grid-template-columns: 2fr 1fr; height: 300px; width: 400px; padding: 10px; border: 2px solid #696989; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-row-start: 1; grid-row-end: 3; } #elem2 { grid-row-start: 1; grid-row-end: 2; } #elem3 { grid-row-start: 2; grid-row-end: 3; }`

:

## Example

Now let's assign the fourth block three rows:

`<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> <div id="elem4">4</div> </div>` `#parent { display: grid; grid-template-columns: 2fr 1fr; height: 300px; width: 400px; padding: 10px; border: 2px solid #696989; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-row-start: 1; grid-row-end: 2; } #elem2 { grid-row-start: 2; grid-row-end: 3; } #elem3 { grid-row-start: 3; grid-row-end: 4; } #elem4 { grid-row-start: 1; grid-row-end: 4; }`

:

## See also

- the `grid-row-end` property
  that specifies an ending position of an element in a grid by rows
- the `grid-row` property
  that specifies a starting and ending positions of an element in a grid by rows
- the `grid-template-rows` property
  that specifies a number and width of rows in a grid
- the `grid-auto-rows` property
  that specifies a number and width of rows in an implicitly-created grid

← →
↑
en ru