Новая адаптивная сетка XY-grid в ZURB Foundation 6.4

Летом 2017 года компания ZURB выпустила полностью переработанную новую адаптивную сетку фреймворка ZURB Foundation 6.4. - XY grid. Адаптивная сетка XY очень похожа на стандартную float сетку (float grid), но включает в себя ряд полезных функций, доступных только с помощью Flexbox, таких как горизонтальное и вертикальное выравнивание, автоматическая установка размеров и полноценная вертикальная сетка (главная новинка данного релиза фреймворка).

Сетка XY поддерживается в Chrome, Firefox, Edge, Safari 6+, IE10 +, iOS 7, Android 4.4+ и других браузерах. Актуальную информацию о поддержке браузерами Flexbox можно посмотреть здесь. Разработчики ZURB Foundation рекомендуют пока использовать XY grid преимущественно для проектов, аудитория которых пользуется современными обновленными версиями браузеров.

Из видео ниже вы узнаете, как работает новая сетка XY, как использовать вертикальное и горизонтальное позиционирование в XY grid, как работать с размерами ячеек сетки. И как это все совмещать со вспомогательными классами ZURB Foundation. Для демонстрации работы XY grid был использован CodePen.