🔥 Жаркий спор по теме Masonry в CSS

Как писал раньше, CSS получает новый функционал, с помощью которого можно будет создавать сетки по типу Pinterest.
Но из-за дебатов между командами WebKit и Chrome релиз задерживается. Решается вопрос о том, как должен выглядеть синтаксис.

Вырисовывается классическая картина с двумя стульями:

  • Добавить свойство display: masonry. Этот вариант предлагает команда Chrome.

По мне, так это логичное и лаконичное решение. Однако возникают сложности на адаптиве.
Представьте, что у вас сетка построена на flex/grid со своими дочерними свойствами (например, flex-direction и т.д.). Но на каком-то из разрешений вам понадобится использовать display: masonry. Тогда нужно будет снова писать "пачку" дочерних настраиваемых свойств для masonry-сетки. Это уже не так радужно и выглядит громоздко.

  • Добавить свойства в спецификацию grid. Команда WebKit предлагает добавить свойство collapsed для правил grid-template-rows и grid-template-columns.

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

Как итог, пока не понятно, в каком виде это будет выглядеть на этапе релиза, но мы можем повлиять на решение и почувствовать силу демократии, приняв участие в открытом issue от W3C.

На какой стороне вы? Какой из предложенных вариантов вам больше нравится?
Первый вариант от Chrome
Второй вариант от WebKit

Больше об айти и фронтенде в частности в моем ТГК:

2 комментария

Часть грида это будет с вероятностью 99%. По сути это и есть сетка просто где колонки имеют высоту по контенту. WebKit'овцы все правильно предложили.

1

Да, я тоже так думаю, но пробежался вертикально по issue в гите - 50/50 пока что все, остается только ждать решения