Masonry в вебе годами делали через JS-библиотеки с костылями для доступности, фокуса и производительности. Grid Lanes наконец закрывают эту историю на уровне CSS.
Новый режим
display: grid-lanes расширяет CSS Grid и позволяет браузеру самому раскладывать элементы по «полосам» — туда, где контент оказывается ближе к верху. В итоге:
— никакого JavaScript
— корректный tab-order и accessibility
— адаптивность без media и container queries
При этом сохраняется вся мощь Grid: переменная ширина колонок, растягивание элементов, явное позиционирование, смена направления раскладки. Плюс появляется новый параметр
item-tolerance, который позволяет контролировать, насколько агрессивно элементы «перестраиваются» между полосами — важная деталь для UX и клавиатурной навигации.📚 Читайте и комментируйте на Хабр.
@js_for_devs