Как лучше сверстать блоки с отступом сверху в 50% от своей высоты?

Question

[Dymok]

Нужно сверстать строки с блоками, где каждый следующий блок будет ниже предыдущего на 50% от своей высоты, то есть должно получиться так:

Сделал с помощью transform: translateY(50%) для второго блока и transform: translateY(100%) для третьего, но в таком случае высота строки с блоками равна высоте только одного блока (видно по фону строки: codepen)
Хотел с помощью margin-top: 50%, но margin считается от высоты родителя и это не работает.
Также вижу вариант с установкой margin-top равным половине высоты блока с помощью JS, но может есть другой способ на CSS организовать?
Спасибо

Comments

[Алексей Уколов]

но в таком случае высота строки с блоками равна высоте только одного блока

И почему это для вас проблема? Если высота строки будет равна всем блокам, между блоками в столбцах будет большое расстояние.

[Dymok]

Алексей Уколов, тоже верно, но в таком случае блоки наезжают на следующую секцию
можно компенсировать паддингом, но как-то негибко получается(

Answer 1

[Никита Егоров]

Можно сделать их в виде колон, сделать контейнер флексовым и элементы через align-self (flex-start, center, flex-end) выровнять.

Пример

Comments

[Dymok]

будет ли?

[Никита Егоров]

Dymok, обновил ответ

[Никита Егоров]

Dymok, если высота блоков динамическая, то высоту контейнера можно высчитывать через js (пару строк)

[Dymok]

Никита Егоров, спасиб за ответ, но, наверное, лучше всего подойдёт transform