С помощью чего можно выравнить элементы?

Question

[SkySeven]

Добрый вечер. С помощью чего можно выравнять элементы. Пока имею нечто вот такое:
https://codepen.io/anon/pen/ErrgMV

Нужно вот так:


Как я понимаю, при помощи flexbox такое сделать невозможно. Grid не подходит, т.к. марджины между элементами должны быть всегда одинаковыми.

Comments

[RAX7]

https://masonry.desandro.com/

[Ankhena]

Grid не подходит, т.к. марджины между элементами должны быть всегда одинаковыми.

grid-gap как раз за это отвечает.

Либо обычный margin в %

Answer 1

[Alexander]

Можно использовать библиотеку Masonry. Так и не понял в чем у вас проблема с CSS Grid'ами. Если делать на флексах:

Answer 2

[KononovD]

делаем display:grid;
grid-gap: расстояние между колонками px;
grid-template-columns: 1fr 1fr 1fr;

и высоту задаем элементам

Comments

[KononovD]

хотя ладно, я попробовал сделать это сам, но с гридами не сладил))

[Rustam Bainazarov]

KononovD, вот это поворот, LOL!

[KononovD]

SmthTo, я так понимаю, там должно быть волшебное свойство, которое уберет явно выраженные строки

https://codepen.io/Kononov_D/pen/vbbgOb

если вы можете объяснить - объясните, буду благодарен)

[SkySeven]

Нужно сделать вот так. Masonry так и не смог заставить адекватно работать.