Есть ли возможность сверстать такую раскладку с помощью column-count? Или с помощью чего такое можно сделать? Если не брать в расчет grid и flex
-
а почему grid не брать в расчет?– Pavel Nazarian17 авг 2021 в 10:00
-
Просто прохожу курс по верстке и препод сделал похожую сетку с помощью column-count и в домашку дал самостоятельно вот это сделать, а grid мы еще не проходили по плану, то есть не подразумевается что мы это должны знать. Вот я и интересуюсь можно ли такое сделать без грида– Blondguy17 авг 2021 в 10:04
-
В теории можно, на практике не самый популярный способ. Попробуйте — расскажете...– Alexey Vladimirov17 авг 2021 в 10:24
Добавить комментарий
|
1 ответ
Примерно так.
Только учтите, что column-span
не везде поддерживается.
Два блока .container' нужны потому, что нельзя с помощью
column-span` растянуть блок только на часть столбцов - или на все, или никак.
.block {
height: 50px;
text-align: center;
line-height: 50px;
margin-bottom: 1em;
}
.one {
background-color: pink;
}
.two {
background-color: wheat;
column-span: all;
}
.container {
column-count: 2;
}
<div class="container">
<div class="container">
<div class="block two">A</div>
<div class="block one">B</div>
<div class="block one">C</div>
<div class="block one">D</div>
<div class="block one">E</div>
<div class="block two">F</div>
</div>
</div>