Cеточная система
XY основы сетки
XY grid работает очень похоже на стандартную float grid, но включает в себя ряд полезных функций, доступных только с Flexbox, таких как горизонтальное и вертикальное выравнивание, автоматическое определение размеров и полная вертикальная сетка.
Поддержка браузеров
Сетка XY поддерживается в Chrome, Firefox, Safari 6+, IE11, iOS 7+ и Android 4.4+. Flexbox поддерживается в Android 2,но недостаточно надежно для использования с этой сеткой. (Просмотр поддержки браузера Flexbox.) Мы рекомендуем использовать сетку XY только для проектов, которые могут жить с чисто передовой поддержкой браузера.
Базовая сетка
<div class="grid-x">
<div class="cell">full width cell</div>
<div class="cell">full width cell</div>
</div>
<div class="grid-x">
<div class="cell small-6">6 cells</div>
<div class="cell small-6">6 cells</div>
</div>
<div class="grid-x">
<div class="cell medium-6 large-4">12/6/4 cells</div>
<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
Ofsets
<div class="grid-x grid-margin-x">
<div class="cell small-4 large-offset-2">Offset 2 on large</div>
<div class="cell small-4">4 cells</div>
</div>