Двухколоночная вёрстка с условием на кол-во блоков
Всем привет! Нужно сделать вёрстку в 2 колонки, но есть несколько условий и изменений для "адаптивности".
Для примера есть блоки:
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: space-between;
height: 100%;
max-height: 660px;
}
.container__item {
display: block;
width: 100%;
max-width: 350px;
height: 200px;
border: 1px solid black;
margin-bottom: 20px;
}
.container__item:last-child, .container__item:nth-child(3){
margin-bottom: 0px;
}
<div class="container">
<div class="container__item">Блок 1</div>
<div class="container__item">Блок 2</div>
<div class="container__item">Блок 3</div>
<div class="container__item">Блок 4</div>
<div class="container__item">Блок 5</div>
</div>
В таком решении всё работает, НО только если ограничить высоту контейнера, а это является невозможным, т.к. блоки 1-5 могут быть абсолютно любой высоты, соответственно задача в том, чтобы во вторую колонку попадали блоки начиная с 4, независимо от высоты контейнера.
Второе условие, это если блоков станет более 6, т.е. если блоков 7, перестройка во вторую колонку должна происходить начиная с 5 блока(4 блока в левой, 3 в правой), если блоков 9, то правая колонка начинается с 6 блока (5 блоков в левой колонке, 4 в правой).
Исходя из моего скромного опыта без JS тут не обойтись.