Comments 4
Классный пример, он наглядно показывает, что для Pinterest-подобных сеток совсем не обязательно вручную высчитывать магические отступы. Единственный момент: если динамически меняется содержимое (например, тексты длиннее), надо внимательно следить за grid-gap, чтобы высота не стала неожиданно “съезжать”
На мой взгляд, то что содержимое может немного растянуть блоки это не критично. Но это можно решить, изначально сделав в дизайне макета высоту блоков чуть больше. Я видел такой пример, где на десктопной версии под тестом остается пространство. На крайний случай, можно использовать медиа запросы, немного увеличивая высоту строки grid-auto-rows: 2px; Таким образом мы увеличиваем высоту всех блоков, но сохраняем их пропорции относительно друг-друга.
А что делаем если блоки динамикой с сервера валятся?)
Можно определить вариации размерности блоков, вряд ли их будет больше 5. И для каждого из вариантов задать свои значение занимаемых строк. Например grid-row-end: span 5; grid-row-end: span 10; grid-row-end: span 15; И со стороны бэкенда для каждой карточки передавать вариант размера блока, можно его рассчитывать от количества символов в тексте, если это картинки, то от высоты изображения. В любом случает нужно писать дополнительный код. Сетка подразумевает, что между размерами блоков есть связь (пропорции), если ее нет, то только js в помощь.
CSS Grid Layout: Асимметричная резиновая сетка