Пост🧱 Masonry-раскладка: что это, зачем нужна и как скоро забудем про JS-костыли

🧱 Masonry-раскладка: что это, зачем нужна и как скоро забудем про JS-костыли Откройте Pinterest, Google Images или Unsplash. Видите, как карточки разной высоты плотно укладываются в колонки без пустых дыр — как кирпичики? Это и есть masonry-раскладка (от англ. masonry — кирпичная кладка). Почему это было болью. CSS из коробки так не умел. Flexbox раскладывает элементы в ряды одинаковой высоты. Grid — по сетке с фиксированными ячейками. А masonry — это когда каждый элемент «прилипает» к нижнему краю предыдущего в своей колонке, независимо от высоты соседей. До сих пор это решалось костылями: ▸ column-count — ломает порядок элементов (они идут сверху вниз, а не слева направо) ▸ JS-библиотеки вроде Masonry.js — работают, но это лишний JS, пересчёт позиций на каждый ресайз, мерцание при загрузке Что изменилось. CSS Grid Level 3 вводит display: grid-lanes — нативную masonry-раскладку без единой строчки JavaScript. Буквально: .container { display: grid-lanes; grid-template-columns: repeat(3, 1fr); gap: 16px; } Всё. Три колонки, элементы автоматически заполняют пустоты по высоте. Когда можно использовать. Safari Technology Preview уже поддерживает финальный синтаксис. Firefox экспериментирует с 2020 года. Chrome и Edge обновляют реализации. Через @supports (display: grid-lanes) можно подключать прямо сейчас с фоллбэком на Masonry.js для старых браузеров. Одна из тех фич, которую ждали 7 лет — и которая сделает тысячи строк JS ненужными. 🔗 Подробнее — WebKit Blog