# Объединение рядов в CSS гридах

Ряды и колонки в гридах формируют сетку. Можно сделать так, чтобы элемент занимал не одну ячейку сетки, а несколько.

Для того, чтобы элемент занял более одного ряда, ему следует задать свойство `grid-row`. В этом свойстве через слеш задаются числа, указывающее начальную и конечную позицию элементов в гриде.

При этом элемент растянется от первой позиции до второй позиции (не включая ее). То есть значение `1 / 2` заставит элемент занять одну первую ячейку, а значение `1 / 3` заставит элемент занять первую и вторую ячейку (но не включая третью).

## Пример

Пусть у нас есть грид с тремя дочерними элементами. Давайте разместим их так, чтобы первый элемент занимал два ряда:

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

:

## Практические задачи

Разместите все элементы и выполните объединение рядов в соответствии со следующим примером:

Разместите все элементы и выполните объединение рядов в соответствии со следующим примером:

Разместите все элементы и выполните объединение рядов в соответствии со следующим примером:

← →
↑