Material Design Lite. Grid

Рассмотрим сетку для MDL.

Строится сетка при помощи Flexbox. Grid состоит из колонок: 12 для настольной версии, 8 для планшета (800px и ниже) и 4 колонки для смартфонов (ниже 500px).

Классы, которые могут пригодиться при работе с сеткой.

  • mdl-grid - Внешний контейнер для сетки.
  • mdl-cell - Контейнер для ячейки. Должен быть внутри какого-нибудь контейнара.
  • mdl-grid--no-spacing - Убирает отступы между ячейками. Опционально для сетки.
  • mdl-cell--N-col - Число колонок в сетке, N в диапазоне 1-12.
  • mdl-cell--N-col-desktop - Число колонок в настольном режиме, N в диапазоне 1-12.
  • mdl-cell--N-col-tablet - Число колонок в планшетном режиме, N в диапазоне 1-8.
  • mdl-cell--N-col-phone - Число колонок в телефонном режиме, N в диапазоне 1-4.
  • mdl-cell--hide-desktop - Прячет колонку на настольных разрешениях экранов (больше 840px).
  • mdl-cell--hide-tablet - Прячет колонку на планшетных разрешениях экранов (больше 480px).
  • mdl-cell--hide-phone - Прячет колонку на мобильных разрешениях экранов (меньше 480px).
  • mdl-cell--stretch - Растягивает колонку по размерам родительского элемента.
  • mdl-cell--top - Прижимает колонку к верхней границе родительского элемента.
  • mdl-cell--middle - Выравнивает колонку к средней границе родительского элемента.
  • mdl-cell--bottom - Прижимает колонку к нижней границе родительского элемента.

Сначала создаётся блок div с классом mdl-grid.

Для создания колонок необходимо внутрь контейнера с классом mdl-grid добавить от одного до нескольких блоков с классом mdl-cell.


<div class="mdl-grid">
  <div class="mdl-cell">
    Ячейка
  </div>	
  <div class="mdl-cell">
    Ячейка
  </div>
  <div class="mdl-cell">
    Ячейка
  </div>
</div>

Получилась сетка из трёх колонок, каждая из которых имеет ширину в 33.3333333333%.

Чтобы изменить стандартный размер колонок, необходимо добавить класс mdl-cell—{number}-col, где вместо number указать число от 1 до 12. Класс добавляется для каждой ячейки.


<div class="mdl-grid">
   <div class="mdl-cell mdl-cell--2-col graybox">Ячейка 2 колонки</div>
   <div class="mdl-cell mdl-cell--8-col graybox">Ячейка 8 колонок</div>
   <div class="mdl-cell mdl-cell--2-col graybox">Ячейка 2 колонки</div>
</div>

Часто приходится учитывать размер колонок под различные размеры экранов. Как говорилось ранее, для планшетов MDL делает 8 колонок, а для смартфонов четыре. Соответственно, можно использовать специальные классы mdl-cell--N-col-desktop, mdl-cell--N-col-tablet, mdl-cell--N-col-phone, которые будут задействованы в соответствующих типах устройств.


<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--6-col mdl-cell--2-col-tablet mdl-cell--2-col-phone graybox">
       6 ячеек в десктопной версии (половина)<br>
       2 ячейки в планшетной версии (четверть)<br>
       2 ячейки в телефонной версии (половина)<br>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem tenetur et quisquam quo, aut obcaecati eveniet! Sunt modi cupiditate commodi veniam, debitis eum alias eligendi iste! Blanditiis animi aspernatur corrupti.
    </div>
    <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--2-col-phone graybox">
        3 ячейки в десктопной версии (четверть)<br>
        4 ячейки в планшетной версии (половина)<br>
        2 ячейки в телефонной версии (половина)<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem tenetur et quisquam quo, aut obcaecati eveniet! Sunt modi cupiditate commodi veniam, debitis eum alias eligendi iste! Blanditiis animi aspernatur corrupti.
    </div>
    <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--4-col-phone graybox">
        3 ячейки в десктопной версии (четверть)<br>
        2 ячейки в планшетной версии (четверть)<br>
        4 ячейки в телефонной версии (вся ширина)<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem tenetur et quisquam quo, aut obcaecati eveniet! Sunt modi cupiditate commodi veniam, debitis eum alias eligendi iste! Blanditiis animi aspernatur corrupti.
    </div>
</div>

В примере выше: в настольной версии первая колонка будет быть больше остальных по схеме 6-3-3=12.

На планшетах самой большой будет вторая колонка по схеме 2-4-2=8.

А на мобильных устройствах первые две колонки будут находиться рядом по схеме 2-2=4, а третья будет под ними с шириной родительского контейнера.

Классы mdl-cell—stretch, mdl-cell—top, mdl-cell—bottom отвечают за выравнивание колонок.

Посмотреть примеры с сеткой

Реклама