Сетка (Grid)

mdui предоставляет адаптивную, мобильно-ориентированную систему сеток из 12 колонок.

Связанное чтение

Контейнер макета

mdui требует обертывания содержимого страницы и системы сетки в контейнер .mdui-container. Мы предоставляем два класса для этой цели.

Класс .mdui-container занимает от 92% до 96% ширины экрана с максимальной шириной 1280px.

<body>
  <div class="mdui-container">
    ...
  </div>
</body>

Класс .mdui-container-fluid всегда занимает 100% ширины экрана.

<body>
  <div class="mdui-container-fluid">
    ...
  </div>
</body>

Базовая сетка

.mdui-row должен содержаться внутри .mdui-container или .mdui-container-fluid, чтобы обеспечить правильное выравнивание (alignment) и внутренние отступы (padding).

Внутри .mdui-row содержатся классы .mdui-col-xs-[1-12], где число в .mdui-col-xs-[1-12] указывает, сколько колонок занимает элемент.

Если количество колонок в одной строке превышает 12, лишние колонки переносятся на новую строку.

Пример

<div class="mdui-row">
  <div class="mdui-col-xs-3">.mdui-col-xs-3</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-9">.mdui-col-xs-9</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-12">.mdui-col-xs-12</div>
</div>

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

.mdui-col-xs-[1-12] Действует на всех экранах, таких как телефоны, компьютеры и т. д.
.mdui-col-sm-[1-12] Действует на устройствах с маленьким экраном и выше, например, планшетах.
.mdui-col-md-[1-12] Действует на устройствах со средним экраном и выше, например, ноутбуках.
.mdui-col-lg-[1-12] Действует на устройствах с большим экраном и выше, например, настольных компьютерах.
.mdui-col-xl-[1-12] Действует на устройствах с очень большим экраном, например, телевизорах.

Смешивание этих классов позволяет добиться адаптивного эффекта.

Адаптивные контрольные точки (breakpoints):

class	Диапазон	Ширина желоба
`.mdui-col-xs-[1-12]`	> 0px	16px (по 8px с каждой стороны колонки)
`.mdui-col-sm-[1-12]`	> 600px
`.mdui-col-md-[1-12]`	> 1024px
`.mdui-col-lg-[1-12]`	> 1440px
`.mdui-col-xl-[1-12]`	> 1920px

Пример

<!-- На устройствах с очень маленьким экраном первая колонка занимает 100% ширины, вторая — 50%. На устройствах с маленьким экраном и выше первая колонка занимает 66.6%, вторая — 33.3%. -->
<div class="mdui-row">
  <div class="mdui-col-xs-12 mdui-col-sm-8">.mdui-col-xs-12<br/>.mdui-col-sm-8</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>

<!-- На устройствах с очень маленьким экраном каждая колонка занимает 50% ширины, на устройствах с маленьким экраном и выше — 33.3%. -->
<div class="mdui-row">
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>

<!-- На всех устройствах каждая колонка занимает 50% ширины. -->
<div class="mdui-row">
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>

Межколоночный интервал

По умолчанию между колонками есть интервал 16px. Достаточно добавить класс .mdui-row-gapless к .mdui-row, чтобы убрать этот интервал.

Пример

<div class="mdui-row mdui-row-gapless">
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
</div>

Смещение колонок

Используйте .mdui-col-offset-xs-[1-12], .mdui-col-offset-sm-[1-12], .mdui-col-offset-md-[1-12], .mdui-col-offset-lg-[1-12] и .mdui-col-offset-xl-[1-12] для смещения колонок вправо. Число в имени класса указывает количество колонок смещения.

Пример

<div class="mdui-row">
  <div class="mdui-col-md-4">.mdui-col-md-4</div>
  <div class="mdui-col-md-4 mdui-col-offset-md-4">.mdui-col-md-4 .mdui-col-offset-md-4</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
  <div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-md-6 mdui-col-offset-md-3">.mdui-col-md-6<br/>.mdui-col-offset-md-3</div>
</div>

Вложенные колонки

Вложение колонок реализуется путем добавления новых элементов .mdui-row и .mdui-col-[*] внутрь существующих колонок. Количество колонок во вложенной строке не должно превышать 12.

Пример

<div class="mdui-row">
  <div class="mdui-col-xs-9">
    Level 1: .col-xs-9
    <div class="mdui-row">
      <div class="mdui-col-xs-8 mdui-col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
      <div class="mdui-col-xs-4 mdui-col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
    </div>
  </div>
</div>

Равные колонки

В .mdui-row-xs-[1-12] можно включить несколько элементов с классом .mdui-col, и они будут разделены поровну. Например, каждый элемент .mdui-col в .mdui-row-xs-5 занимает 20% ширины.

Пример

<div class="mdui-row-xs-5">
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
</div>

Смешивание .mdui-row-xs-[1-12], .mdui-row-sm-[1-12], .mdui-row-md-[1-12], .mdui-row-lg-[1-12], .mdui-row-xl-[1-12] позволяет реализовать адаптивный макет.

Список CSS-классов

Имя класса	Описание
`.mdui-container`	Контейнер макета с ограничением ширины
`.mdui-container-fluid`	Контейнер макета со 100% шириной
`.mdui-row`	Определяет строку
`.mdui-col-[xs\|sm\|md\|lg\|xl]-[1-12]`	Определяет колонку
`.mdui-row-gapless`	Убирает межколоночные интервалы
`.mdui-col-offset-[xs\|sm\|md\|lg\|xl]-[1-12]`	Смещение колонки
`.mdui-row-[xs\|sm\|md\|lg\|xl]-[1-12]`	Равные колонки

Шрифт Roboto

Типографика