Cеточная система XY Grid Foundation

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>​

Сетка XY Grid

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>

Сетка XY Grid