# Комбинации объединений по рядам и столбцам в CSS гридах

Давайте рассмотрим различные типы объединений по рядам и столбцам.

## Пример

Давайте сделаем таблицу, скомбинировав свойства `grid-column` и `grid-row`:

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

:

## Пример

Давайте сделаем так, чтобы первый элемент в таблице занял все столбцы на первом ряду, а остальные элементы расположились на втором ряду, заняв одинаковые по ширине столбцы:

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

:

## Пример

Пусть теперь у нас будет таблица, состоящая из пяти элементов. Давайте расположим первый элемент на верхнем ряду, а все остальные - на втором ряду:

`<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: repeat(4, 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 / 5; } #elem2 { grid-row: 2 / 3; grid-column: 1 / 2; } #elem3 { grid-row: 2 / 3; grid-column: 2 / 3; } #elem4 { grid-row: 2 / 3; grid-column: 3 / 4; } #elem5 { grid-row: 2 / 3; grid-column: 4 / 5; }`

:

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

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

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

← →
↑