Как сделать такое расположение блоков на flex?

Question

[Анатолий]

Имеется 3 столбика, как задать высоту, чтобы была подобная сортировка:

Если высота не задана, то все блоки просто идут вниз.
Высота блоков разная, поэтому просто просчитать высоту не как не получится.
Как решить, через js - знаю.


Может хотя бы кто-то подскажет как выравнять:

При сжатии экрана, когда 2 столбика, нужно чтобы не было пустоты между 1 и 3 блоком.

Comments

[Даниил Руднев]

Обернуть блоками каждую колонку?

[Анатолий]

Даниил Руднев, вопрос в том, что число колонок не известно.
Т.е. условно говоря, колонка имеет ширину 30%, но не меньше 100px.
Получается, что чем Уже экран, тем меньше колонок.

Answer 1

[g33km]

Один из вариантов: Codepen
объявляем переменную высоты внутренних блоков (ибо величина динамическая)

:root {
--block-height: 50px;
}

Обертке добавляем свойство
height: calc(var(--block-height) * 3 + 12px));

Теперь высота блока-обертки будет подстраиваться под высоту блоков внутри с учетом их margin-ов (у вас указано для всех блоков margin:2px всего верхних и нижних отступов получается 6, сами блоки - 50px высотой, три блока в колонке, отсюда суммарная высота блока будет 50px*3 + 2px*6=162px)

А дальше (если это возможно через js или другими способами) меняем значение css-переменной --block-height на необходимое значение, таким образом управляем высотой внутренних блоков.

Comments

[Анатолий]

изменяю ширину экрана, но количество колонок не меняется! а нужно изменять, вплоть до 1 колонки, когда экран узкий

[g33km]

Анатолий, при этом те колонки, что находятся справа, должны скрываться, или уходить под первую колонку?

[Анатолий]

g33km, да нет, ерунда какая-то получается. Это сильно сложно получается так делать. Оставлю, тогда горизонтальный перенос.

Смысл был простой, при сужении экрана, если колонки не входят, то переносятся на вниз, и в конечном счете получаем одну колонку.

[g33km]

Анатолий, Codepen

[Анатолий]

g33km, ну не все так просто, в условии же написано, что высота блоков разная, т.е. к примеру блок 2 может быть в 2 раза больше.