# Объединение столбцов в CSS гридах

Аналогичным образом можно объединять столбцы с помощью свойства `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; padding: 10px; border: 2px solid #696989; width: 400px; height: 300px; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-column: 1 / 2; } #elem2 { grid-column: 2 / 3; } #elem3 { grid-column: 3 / 4; } #elem4 { grid-column: 1 / 4; }`

:

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

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

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

← →
↑