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

от автора

Masonry сетка на CSS

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.

Больше о фронтенде, технологиях и новостях в мире JS в моем ТГК — aleksandr_frontend

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

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

47.89% Свойство masonry для display от команды Chrome34
56.34% Свойства для grid от команды WebKit40

Проголосовал 71 пользователь. Воздержались 12 пользователей.

ссылка на оригинал статьи https://habr.com/ru/articles/857912/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *