Как сверстать блоки с разной высотой (плиткой/кирпичной кладкой) без использования JavaScript?

Question

[Delagardi]

Здравствуйте

Я сейчас изучаю верстку и хочу заверстать один макет. Но не знаю как подступиться к его нижней части.
Подскажите, пожалуйста, как сверстать блоки с разной высотой без использования JavaScript. Точнее использовать можно только html5 и css3. Или подскажите хотя бы что погуглить на английском, ничего внятного пока не удалось найти в рунете. Пример макета ниже.

Answer 1

[Sergej]

Это называется Masonry
codepen.io/search?q=Masonry&limit=all&order=popula...

И почему без js?
codepen.io/seanmccaffery/pen/Gxtqy

Comments

[Delagardi]

спасибо, сейчас поищу. Без js потому что это требование, так сказать, наставника.

[Alex]

Masonry не решит всех задач. Но частные случаи вполне можно делать.

Answer 2

[Александр Таратин]

Без js максимум можно сделать
w3bits.com/css-masonry
но в вашем случае не поможет.

Comments

[Delagardi]

Спасибо, как раз пытаюсь разобраться в таком же варианте.

Это не поможет потому что в моем макете есть горизонтальные блоки, верно?

[Александр Таратин]

Delagardi: Да, колонки должны быть одинаковой ширины.

[Delagardi]

Александр Таратин: Ясно, спасибо что уделили свое время.

[Aleksandr]

Спасибо!)))

Answer 3

[smanioso]

Если посмотреть на макет, то можно понять следующее:
- есть сетка в 5 колонок
- элементы занимают 1 или 2 клетки
- элемент "трейлер" занимает 2 клетки по горизонтали
- элемент "рейтинги" занимает 2 клетки по вертикали

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

PS: и даже в реальном примере Masonry не нужен - у нас ведь сетка с заранее известными размерами.

Comments

[Delagardi]

спасибо. Верстать через абсолютное позиционирование, верно?

Answer 4

[Nick Murzin]

Попробуйте поиграться с разномастными флоатами, разбив свою "кладку" на примерно две части и распихав их по разным сторонам. Насколько это будет респонсивно и корректно не знаю, но как вариант.

Answer 5

[MR1R1Bash]

Не много CSS3 магии: Css-masonry, решения подойдет для проектов не требующих поддержку старых браузеров.