0

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

3
  • а почему grid не брать в расчет? 17 авг 2021 в 10:00
  • Просто прохожу курс по верстке и препод сделал похожую сетку с помощью column-count и в домашку дал самостоятельно вот это сделать, а grid мы еще не проходили по плану, то есть не подразумевается что мы это должны знать. Вот я и интересуюсь можно ли такое сделать без грида
    – Blondguy
    17 авг 2021 в 10:04
  • В теории можно, на практике не самый популярный способ. Попробуйте — расскажете... 17 авг 2021 в 10:24

1 ответ 1

3

Примерно так.

Только учтите, что 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.