# grid-row property

The `grid-row` property specifies a starting and ending positions of an element in a grid by rows. The property values ​​can be positive or negative numbers, separated by a slash. The first number indicates the starting position of the element, the second the ending position. If we specify a positive number as the value, then the 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: starting position / ending position; }`

## Example

Let's give the elements in the grid starting and ending 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; border: 2px solid #696989; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-row: 1 / 2; } #elem2 { grid-row: 2 / 3; } #elem3 { grid-row: 3 / 4; }`

:

## Example

Now let's specify negative numbers in the `grid-row` property:

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

:

## Example

Let's make the first block occupy two rows:

`<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: 1 / 3; /* два ряда */ } #elem2 { grid-row: 1 / 2; } #elem3 { grid-row: 2 / 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: 1 / 2; } #elem2 { grid-row: 2 / 3; } #elem3 { grid-row: 3 / 4; } #elem4 { grid-row: 1 / 4; }`

:

## Example

Let's combine the `grid-row` and `grid-column` properties:

`<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 1fr; border: 2px solid #696989; padding: 10px; height: 300px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-row: 1 / 3; } #elem2 { grid-row: 1 / 2; } #elem3 { grid-row: 1 / 2; } #elem4 { grid-row: 2 / 3; grid-column: 2 / 4; }`

:

## Example

Now let's make sure that the first and fifth blocks occupy the entire row, and the second block occupies two rows and two columns, and the third and fourth blocks occupy one row and two columns:

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

:

## See also

- the `grid-column` property
  that specifies a starting and ending positions of an element in a grid by columns
- the `grid-row-start` property
  that specifies a starting position of an element in a grid by rows
- the `grid-row-end` property
  that specifies an ending position of an element in a grid by rows

← →
↑
en ru