Tagged: Masonry

22
Июл
2021

(CSS) Как сделать сетку, заполняющая пропуски в себе

Имеется сетка, которую надо привести в такой вид:

Есть ещё один пример, который вы можете пощупать. Меняйте размер окна и посмотрите как всё адаптируется и слаживается:
https://959o8.csb.app/
Но мне нужно добиться именно такого вида, как …

19
Июн
2021

Раскладка изображений мозайкой

Задача разложить изображения в ряд мозайкой как это делают на https://www.freepik.com
Особенности:

Изображения всегда заполняют всю ширину экрана
Изображения выстраиваются в линии, при этом высота каждой линии отличается
Высота, ширина из…

07
Май
2020

Приключения Masonry-раскладки в CSS

«Masonry-раскладка», она же «плиточная верстка», она же «раскладка кирпичиками», она же «Cascading Grid», она же — вернее, один из ее вариантов — «верстка как у Pinterest», она же… в общем, задача верстки такого типа макетов известна верстальщикам очень давно, под многими именами. Раньше на чистом CSS она до конца не решалась. Можно было добиться внешне похожего результата для частных случаев, но какой-то нюанс ускользал. На практике приходилось использовать JS-библиотеки — прежде всего […]

11
Фев
2020

Masonry неверно отображает сетку

Пример на CodePen

Надо, чтобы 1-2-3-4 были в одном ряду, по размерам более, чем достаточно, но почему-то 2 и 3 переносятся на новую строчку. Этот пример брал из документации и менял код.

Размер контейнера 1170px

Мои стили:

.grid-item.h…

09
Янв
2020

Стандарт CSS для Masonry-раскладки: от идеи — к первым конкретным наработкам

Одним из самых больших разочарований CSS-гридов с самого их появления была невозможность решить задачу плотной упаковки блоков, известную как «Masonry-раскладка» (в честь самой популярной JS-библиотеки для нее). Алгоритм авторазмещения с ключевым словом dense почти решает ее, но… лишь почти, к тому же упирается в досадное браузерное ограничение в 1000 грид-полос. Веб-разработчики давно просили добавить такую возможность […]