​​Masonry-раскладка на чистом CSS

Компьютерный инженер Темани Афиф рассказал в своем блоге на dev.to, как создать masonry-раскладку (или “плиточную верстку”) с помощью чистого CSS. Это экспериментальная функция, которую можно протестировать в браузере Firefox.

Masonry-раскладку обычно делают с помощью JS или большого количества CSS-правил, но разработчик смог выполнить ее в находящейся в разработке спецификации CSS Grid Level 3. Она добавляет masonry-раскладку в качестве дополнительного режима для Grid-контейнеров. Все, что нужно, это добавить контейнеру следующее CSS-правило: grid-template-rows: masonry;.

Чтобы создать masonry-раскладку, нужно сначала включить флаг. Для этого:

1. Откройте браузер Firefox и напишите в адресной строке about:config;
2. произведите поиск по masonry;
3. придайте флагу значение true.

Спецификация вводит множество свойств для управления mansory-раскладкой (например, изменение направления), но автор говорит, что пока нет смысла их заучивать, так как они могут измениться в любой момент.

Полное описание метода доступно по ссылке:
https://dev.to/afif/finally-a-css-only-solution-to-create-masonry-layouts-1obh

#css #masonry #firefox