# Свойство grid-row

Свойство `grid-row` задает начальную и конечную позиции элемента в гриде или сетке по рядам. Значениями свойства могут быть положительные или отрицательные числа, указанные через слеш. Первое число обозначает начальную позицию элемента, второе - конечную позицию. Если в качестве значения задаем положительное число, то позиция элемента отсчитывается сверху вниз. При указании отрицательного числа элемент будет располагаться в обратном порядке, т.е. снизу вверх.

## Синтаксис

`селектор { grid-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; 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; }`

:

## Пример

А теперь давайте в свойстве `grid-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; 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; }`

:

## Пример

Сделаем так, чтобы первый блок занимал два ряда:

`<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; }`

:

## Пример

Теперь давайте назначим четвертому блоку три ряда:

`<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; }`

:

## Пример

Скомбинируем свойства `grid-row` и `grid-column`:

`<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; }`

:

## Пример

А теперь давайте сделаем так, чтобы первый и пятый блоки занимали весь ряд, а второй блок - два ряда и две колонки, а третий и четвертый блоки - один ряд и две колонки:

`<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; }`

:

## Смотрите также

- свойство `grid-column`,
  которое задает начальную и конечную позиции элемента в гриде по столбцам
- свойство `grid-row-start`,
  которое задает начальную позицию элемента в гриде по рядам
- свойство `grid-row-end`,
  которое задает конечную позицию элемента в гриде по рядам

← →
↑
en ru