Как сверстать блоки кирпичным стилем?

Question

[Амир]

Добрый день. Как можно сверстать так блоки:

Надеюсь, нарисовал понятно. В блоках цифры - это порядок блоков по верстке. Блоки фиксированной высоты и ширины.
Если использовать просто float: left, то третий блок уходит вниз до границы второго блока, а не первого (и так далее) :(

Заранее благодарен за ответы.

Comments

[Сергей delphinpro]

Если высота фиксированная, то все просто.
https://jsfiddle.net/Lppba0gu/

Answer 1

[Карен Мнацаканян]

https://masonry.desandro.com/

Comments

[Карен Мнацаканян]

https://tympanus.net/Development/GridLoadingEffect...

[Амир]

А с помощью CSS без сторонних библиотек разве никак? Не верится что-то.

[Карен Мнацаканян]

Амир: dbmast.ru/adaptivnye-html-bloki-v-vide-kirpichnoj-...

[Карен Мнацаканян]

https://codepen.io/seanmccaffery/pen/Gxtqy тоже вариант

[Амир]

Карен Мнацаканян: вот первый вариант замечательный, он мне подойдет. Спасибо большое

Answer 2

[Игорь Перегудов]

посмотри плагин https://masonry.desandro.com/