# Перекрытие столбцов в CSS гридах

В ситуации, когда несколько элементов занимают один и тот же столбец может наблюдаться их перекрытие, при котором каждый последующий элемент сдвигается на ряд ниже.

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

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

:

Реализуйте следующий пример:

Реализуйте следующий пример:

Реализуйте следующий пример:

← →
↑