📊 Вы уже слышали про Masonry в CSS? Я к вам с новинкой фронтенда. Да, они ещё случаются 🙂 Есть такой UI-паттерн — «сетка как в Pinterest» (как на картинке выше). Карточки разной высоты, которые аккуратно заполняют пространство без дыр. Раньше всё это дело костылили на JavaScript (либы Masonry.js, react-responsive-masonry и т.п). На это дело в рантайме у браузера уходила тонна вычислений, а при ресайзе окна вся эта сетка кряхтела-пердела и порой ломалась. В CSS для этой задачи пророчили появление чего-то вроде display: masonry, но по итогу появился display: grid-lanes – полноценный родной CSS-механизм для masonry-подобных раскладок. 🚀 Как это работает Пример на 3 строки CSS: .gallery { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } ...и всё! Браузер сам решает, в какую «полосу» положить элемент, чтобы он оказался как можно выше. 👀 [Демка в песочнице] ✨ Неочевидные возможности Самый кайф — не то, что это «masonry без JS», а то что grid-lanes остаётся полноценным Grid’ом. • Разные ширины колонок Хочешь 2fr 1fr 1fr — пожалуйста. Хочешь minmax() или auto-fill — без проблем. Алгоритм раскладки продолжает работать. Ты контролируешь структуру, браузер — размещение. • span работает как обычно Элемент можно растянуть на 2–3 колонки через grid-column: span 2 и это не превращается в боль с пересчётом позиций, как в JS-masonry – всё нативно, без костылей. • Нормальный gap, а не отрицательные margin’ы Никаких обёрток, никаких плясок с компенсацией отступов, просто gap: 16px — и всё. По сути, это не «новый отдельный режим». Это старый добрый Grid, но с новым алгоритмом размещения элементов. 🙂 Нюанс про поддержку На сегодня grid-lanes есть в Safari Technology Preview 234. Chrome и другие браузеры движутся в ту же сторону, но ещё не везде стабильно включено по умолчанию. Так что в продакшене пока нужны фоллбеки или проверка через @supports. 👍 Морали не будет, просто напоминаю, что фронтенд развивается и это круто. Всё меньше задач разработки интерфейсов мы будем делегировать JS-решениям в пользу нативного CSS. #css #css_новинка