Есть ли возможность сверстать такую раскладку с помощью column-count?

Question

Есть ли возможность сверстать такую раскладку с помощью column-count? Или с помощью чего такое можно сделать? Если не брать в расчет grid и flex

Answer 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>

БЛОГ НА HUSL

Есть ли возможность сверстать такую раскладку с помощью column-count?

Ответы (1 шт):