Нестандартная последовательность размещения блоков на странице

Question

Как разместить блоки в такой последовательности, как указано на картинке? Любые методы приветствуются, в том числе и JavaScript, с помощью которого вероятнее всего и возможно такое размещение блоков. Или все гораздо проще?

Answer 1

Проще всего разбить на два массива! И далее с помощью nth-child с шагом выводить. С помощью padding-bottom сохраняем пропорции. Тем самым блоки всегда адаптивны! и будут подстраиваться под экран в зависимости от родительского контейнера

const arr = [1, 2, 3, 4, 5, 6]

const chunkArr = (arr) => {
  const leftArr = [];
  const rightArr = [];
  arr.forEach((item, index) => {
    if (index % 2 === 0) rightArr.push(item);
    else leftArr.push(item);
  });
  return [leftArr, rightArr];
}

const newArr = chunkArr(arr);

const lCont = document.querySelector('.left-cont');
const rCont = document.querySelector('.right-cont');

newArr[0].forEach(item => {
  rCont.innerHTML += `<div class="item"><div class="tcont">${item}</div></div>`
});

newArr[1].forEach(item => {
  lCont.innerHTML += `<div class="item"><div class="tcont">${item}</div></div>`
});

.container {
  width: 400px;
  display: flex;
  background: lightblue;
  padding: 15px;
  justify-content: space-around;
}

.left-cont, .right-cont {
  width: 46%
}

.left-cont .item, .right-cont .item {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  background-color: gray;
  margin-bottom: 20px;
}

.left-cont .item:nth-child(3n + 1) {
  padding-bottom: 120%;
}

.right-cont .item:nth-child(3n + 1) {
  padding-bottom: 60%;
}

.tcont {
  position: absolute;
  top: 0;
  left: 0;
  width :100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="left-cont">
  
  </div>
  <div class="right-cont"></div>
</div>

Answer 2

думаю наиболее простое решение , это использование гридов - только html,css

.grid-container {
    width: 400px;
    background:#cee4f2;
    border: 1px solid grey;
    height: 700px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: '\31  \32 ''\31  \32 ''\31  \34 ''\31  \34 ''\33  \34 ''\33  \36 ''\33  \36 ''\35  \36 ''\35  .''\35  .';
}

.item-1 {
    grid-area: \31;
}

.item-2 {
    grid-area: \32;
}

.item-3 {
    grid-area: \33;
}

.item-4 {
    grid-area: \34;
}

.item-5 {
    grid-area: \35;
}

.item-6 {
    grid-area: \36;
}

.item {
    border: 1px solid grey;
    margin: 10px;
    background: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="grid-container">
  <div class="item-1 item">1</div>
  <div class="item-2 item">2</div>
  <div class="item-3 item">3</div>
  <div class="item-4 item">4</div>
  <div class="item-5 item">5</div>
  <div class="item-6 item">6</div>
</div>

БЛОГ НА HUSL

Нестандартная последовательность размещения блоков на странице

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