Сетка Ionic

Сетка Ionic отличается от большинства других фреймворков; она использует модель Flexible Box. Кроме того, на мобильных устройствах её поддерживают почти все телефоны. Класс `row` задаёт строки, а класс `col` — столбцы.

Сетка равного размера

Если элемент с классом `row` содержит классы `col`, столбцы будут установлены равного размера.

В следующем примере класс `row` содержит 5 классов `col`, и каждый столбец имеет ширину 20%.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Задание ширины столбцов

Вы можете задавать разные размеры для столбцов в пределах строки. По умолчанию столбцы делятся на равные размеры. Но также можно задавать ширину столбцов в процентах (одна строка разделена на 12 сеток).

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Примечание: В примере каждый класс `col` автоматически добавляет границу и серый фон.

Ниже приведены некоторые имена классов с процентами для указания ширины столбца:

.col-10	10%
.col-20	20%
.col-25	25%
.col-33	33.3333%
.col-50	50%
.col-67	66.6666%
.col-75	75%
.col-80	80%
.col-90	90%

Сетка со смещениями

Столбцы могут иметь левое смещение, как показано в следующем примере:

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-33">.col</div>
  <div class="col col-33 col-offset-33">.col</div>
</div>

<div class="row">
  <div class="col col-33 col-offset-67">.col</div>
</div>

Ниже приведены некоторые названия классов процентного смещения:

.col-offset-10	10%
.col-offset-20	20%
.col-offset-25	25%
.col-offset-33	33.3333%
.col-offset-50	50%
.col-offset-67	66.6666%
.col-offset-75	75%
.col-offset-80	80%
.col-offset-90	90%

---

Сетка вертикального выравнивания

Модель Flexbox позволяет легко задавать вертикальное выравнивание для колонок. Вертикальное выравнивание включает верхнее, среднее и нижнее положение и может применяться ко всем колонкам в строке или к отдельным колонкам.

В примере последняя колонка содержит самый высокий контент, чтобы нагляднее продемонстрировать вертикальное выравнивание.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-top">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-bottom">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

---

Адаптивная сетка

Когда экраны портативных устройств меняют ориентацию, например альбомную или портретную, сетка в каждой строке должна уметь адаптировать свой размер в зависимости от различной ширины.

Адаптивные классы для разных устройств следующие:

Адаптивные классы	Описание
.responsive-sm	Меньше, чем альбомная ориентация телефона
.responsive-md	Меньше, чем планшет в портретной ориентации
.responsive-lg	Меньше, чем планшет в альбомной ориентации

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Другие расширения