Grid. Вёрстка с сеткой. Система грид

Важная составляющая адаптивного дизайна — это гибкая сетка, позволяющая элементам веб-страницы менять свои размеры, помещаясь в экран любой ширины.

Система сетки на базе UIKit 2 вмещает до 10 столбцов. Используются блоки с предопределенными классами, внутри каждой сетки, которые и определяют ширину колонки. Также можно совместить/комбинировать Grid с классами из компонента Flex, который прекрасно работает в современных браузерах.


Удобный, гибкий, aдаптивный макет сеткой. Применение

Для того, чтобы создать grid-контейнер, добавим класс .uk-grid к родительскому элементу. Для дочерних элементов, пропишем один из классов .uk-width-*, чтобы определить, какие будут размеры и расположение у колонок. Grid поддерживает 1, 2, 3, 4, 5, 6 и 10 единиц деления.

Класс Описание
.uk-width-1-1 Заполяет 100% доступной ширины.
.uk-width-1-2 Делит сетку полам.
.uk-width-1-3.uk-width-2-3 ...
.uk-width-1-4.uk-width-3-4 ...
.uk-width-1-5.uk-width-4-5 ...
.uk-width-1-6.uk-width-5-6 ...
.uk-width-1-10.uk-width-9-10 ...

Простой пример кода с сеткой по умолчанию имеющей 2 колонки.
Пространство разбивается на две части.

Разметка

<div class="uk-grid">
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

Cетка с 3 колонками будет выглядеть следующим образом:

.uk-width-1-3
.uk-width-1-3
.uk-width-1-3

Разметка

<div class="uk-grid">
    <div class="uk-width-1-3">...</div>
    <div class="uk-width-1-3">...</div>
    <div class="uk-width-1-3">...</div>
</div>

Обзор основных классов .uk-width-*. Примеры

Примечание В Grid-сетке отсутствуют связанные CSS-стили. В примерах ниже использованы блок-панели из компонента Panel.
uk-width-1-1100%
uk-width-1-250%
uk-width-5-1050%
uk-width-1-333.333%
uk-width-2-366.666%
uk-width-1-425%
uk-width-3-475%
uk-width-1-520%
uk-width-4-580%
uk-width-1-616.666%
uk-width-5-683.333%
uk-width-1-3
=33.333%
uk-width-2-6
uk-width-1-4
=25%
=25%
uk-width-1-4
uk-width-1-5
=20%
20%
=20%
uk-width-2-10
uk-width-1-6
=16.666%
16.666%
16.666%
=16.666%
uk-width-1-6
uk-width-2-366.666%
uk-width-2-633.333%
uk-width-2-450%
uk-width-3-650%
uk-width-2-540%
uk-width-3-560%
uk-width-2-633.333%
uk-width-4-666.666%

Адаптивная ширина

UIKit 2 предоставляет ряд очень полезных классов для отзывчивой ширины. В основном они работают так же, как обычные классы ширины, за исключением того, что они имеют префикс, что приводит их в действие в определенных точках останова. Эти классы могут быть объединены с классами видимости из компонента Utility. Это очень удобно при настроке макета, можно подогнать контент для разных размеров устройств.

Класс Описание
.uk-width-* Влияет на все ширины устройства.
Столбцы сетки остаются рядом.
.uk-width-small-* Влияет на ширину устройства от 480px и выше.
Столбцы сетки будут адаптироваться в меньшие размеры.
.uk-width-medium-* Влияет на ширину устройства от 768px и выше.
Столбцы сетки будут адаптироваться в меньшие размеры.
.uk-width-large-* Влияет на ширину устройства от 960px и выше.
Столбцы сетки будут адаптироваться в меньшие размеры.
Важно! Для автоматического создания отступов между колонками, добавьте атрибут
data-uk-grid-margin.

Пример

.uk-width-medium-1-2 .uk-width-large-1-3
.uk-hidden-medium .uk-width-large-1-3
.uk-width-medium-1-2 .uk-width-large-1-3
.uk-width-1-2 .uk-width-medium-1-3
.uk-hidden-small .uk-width-medium-1-3
.uk-width-1-2 .uk-width-medium-1-3
.uk-width-1-1 .uk-visible-small
.uk-width-medium-1-1 .uk-visible-medium
.uk-width-large-1-1 .uk-visible-large

Grid-зазоры

Grid-сетка автоматически создаёт горизонтальный зазор между столбцами и вертикальный между двумя последующими строками. По умолчанию grid-зазоры на больших экранах шире.

Пример

Современные технологии
Адаптивная вёрстка
Стандартный размер

Large зазор

Чтобы использовать большой зазор между грид-ячейками, просто добавьте класс .uk-grid-large.

Пример

Большой отступ
uk-grid-large
Большой отступ

Разметка

<div class="uk-grid uk-grid-large">
    ...
</div>

Medium зазор

Чтобы применить зазор среднего размера между столбцами сетки, просто добавьте класс .uk-grid-medium.

Пример

Средний отступ
uk-grid-medium
Средний отступ

Small зазор

Чтобы применить маленький зазор между грид-ячейками, просто добавьте класс .uk-grid-small.

Пример

Мелкий отступ
uk-grid-small
Мелкий отступ

Collapse зазор

Чтобы полностью удалить зазор, просто добавьте класс .uk-grid-collapse.

Пример

Убрать пространство
uk-grid-collapse
Без зазора

Разметка

<div class="uk-grid uk-grid-collapse">
    ...
</div>

Вложенные гриды

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

Пример

.uk-width-1-2
.uk-width-1-2
.uk-width-1-2

Разметка

<div class="uk-grid">
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">
        <div class="uk-grid">
            <div class="uk-width-1-2">...</div>
            <div class="uk-width-1-2">...</div>
        </div>
    </div>
</div>

Центрирование грида

Чтобы отцентрировать колонку грида добавьте класс .uk-container-center из компонента Utility.

Пример

uk-container-center

Пример

uk-container-center

Разметка

<div class="uk-width-1-2 uk-container-center">...</div>
    
    <!-- или так -->
    
<div class="uk-grid">
    <div class="uk-width-1-3 uk-container-center">...</div>
</div>

Грид-разделитель

Грид-разделитель (грид-линии) — это горизонтальные и вертикальные разделительные линии. Добавьте класс .uk-grid-divider grid-контейнеру для разделения столбцов грида линиями. Чтобы разделить грид горизонтальной линией, просто добавьте класс .uk-grid-divider к элементу <hr> или <div>.

Пример

.uk-width-medium-1-3
.uk-width-medium-1-3
.uk-width-medium-1-3

.uk-width-medium-1-3
.uk-width-medium-1-3
.uk-width-medium-1-3

Разметка

<div class="uk-grid uk-grid-divider">
    ...
</div>

<hr class="uk-grid-divider">

<div class="uk-grid uk-grid-divider">
    ...
</div>
Важное замечание Горизонтальный разделитель нельзя применять к сеткам любого из классов
uk-push-* или uk-pull-*.

Реверс. Порядок отображения

Вы можете изменить порядок отображения столбцов.

  • Добавьте один из классов .uk-push-*, чтобы переместить столбец вправо.
  • Добавьте один из классов .uk-pull-*, чтобы переместить столбец влево.

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

Развернуть блоки в исходном коде бывает очень полезно для адаптивного дизайна и SEO.

Заметка Эта штука работает в сочетании с одним из классов .uk-width-medium-*.

Пример

uk-width-medium-1-2 uk-push-1-2 Блок А
uk-width-medium-1-2 uk-pull-1-2 Блок Б
uk-width-medium-2-5 uk-push-3-5 Блок В
uk-width-medium-2-5 uk-pull-2-5 Блок Г

Разметка

<div class="uk-grid">
    <div class="uk-width-medium-1-2 uk-push-1-2">Какой-то текст...</div>
    <div class="uk-width-medium-1-2 uk-pull-1-2">А этот отображается первым...</div>
</div>
Примечание На девайсе с шириной экрана менее 768px, элементы будут отображаться в соответствии с исходным порядком разметки.

Одинаковая, отзывчивая высота столбцов

Компонент Grid использует Flexbox, поэтому высота столбцов грида выстраивается автоматически. Чтобы добиться того же эффекта в старых браузерах, которые не поддерживают Flexbox, просто добавьте атрибут data-uk-grid-match в свой grid-контейнер. Если грид состоит из нескольких строк, сопоставляются только столбцы грида в одной строке.

Чтобы сопоставить столбцы сетки по всем строкам, используйте
data-uk-grid-match="{row: false}".

Пример

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

Разметка

<div class="uk-grid" data-uk-grid-match>
    ...
</div>

Примечание Если столбцы грида расширяются до 100% ширины, их высоты больше не будут совпадать. Это имеет смысл, например, когда они располагаются вертикально в более узких областях просмотра.


Одинаковая, отзывчивая высота блоков

Если вы хотите установить одинаковую высоту блокам в гриде, добавьте класс .uk-grid-match.
При использовании data-атрибута вам необходимо добавить селектор {target:'.uk-panel'}.

Пример

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

Разметка

<div class="uk-grid uk-grid-match" data-uk-grid-match="{target:'.uk-panel'}">
    <div class="uk-width-medium-1-3">
        <div class="uk-panel">...</div>
    </div>
    <div class="uk-width-medium-1-3">
        <div class="uk-panel">...</div>
    </div>
    <div class="uk-width-medium-1-3">
        <div class="uk-panel">...</div>
    </div>
</div>

Перенос нескольких строк

Вы можете создать грид с любым количеством колонок, которые делают автоматический перенос на следующую строку. Добавьте атрибут data-uk-grid-margin, чтобы установить автоматический отступ между строками грида. Обычно этот макет строится с использованием элемента <ul>.

Пример

  • Блок
  • Блок
  • Блок
  • Блок
  • Блок

Разметка. Перенос строк. Автоматический отступ

<ul class="uk-grid" data-uk-grid-margin>
    <li class="uk-width-medium-1-3">
        <div class="uk-panel">...</div>
    </li>
    <li class="uk-width-medium-1-3">
        <div class="uk-panel">...</div>
    </li>
    <li class="uk-width-medium-1-3">
        <div class="uk-panel">...</div>
    </li>
    <li class="uk-width-medium-1-2">
        <div class="uk-panel">...</div>
    </li>
    <li class="uk-width-medium-1-2">
        <div class="uk-panel">...</div>
    </li>
</ul>

Собственная ширина блокам

Вы также можете применить собственную ширину к колонкам грида. Добавьте класс .uk-width и используйте встроенный стиль для определения ширины. В примере ниже используются фиксированные значения ширины в пикселях.

  • Блок
  • Блок
  • Блок
  • Блок
  • Блок
  • Блок
  • Блок
  • Блок

Разметка

<ul class="uk-grid" data-uk-grid-margin>

    <!-- Эти элементы имеют ширину в процентах -->
    <li class="uk-width-medium-1-4">...</li>
    <li class="uk-width-medium-6-10">...</li>

    <!-- Эти элементы имеют ширину в пикселях -->
    <li class="uk-width" style="width: 100px;">...</li>
    <li class="uk-width" style="width: 150px;">...</li>

</ul>

Равные колонки грида

Чтобы создать грид, ширина дочерних элементов которой разделена поровну, вам не нужно применять один и тот же класс к каждому элементу списка в grid-контейнере. Добавьте один из классов .uk-grid-width-* grid-контейнеру и всё будет работать как задумано!

Класс Описание
.uk-grid-width-1-2 Грид разделит контейнер на две половины.
.uk-grid-width-1-3 Грид разделит контейнер на три части.
.uk-grid-width-1-4 Грид разделит контейнер на четыре части.
.uk-grid-width-1-5 Грид разделит контейнер на пять частей.
.uk-grid-width-1-6 Грид разделит контейнер на шесть частей.
.uk-grid-width-1-10 Грид разделит контейнер на десять частей.

Пример

  • Блок
  • Блок
  • Блок
  • Блок

Разметка

<ul class="uk-grid uk-grid-width-1-4">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

Отзывчивая ширина

UIkit 2 также предоставляет адаптивные классы ширины грида. Вы можете применять их для поддержания равномерного размера колонок грида независимо от ширины устройства.

Класс Описание
.uk-grid-width-* Влияет на все ширины устройства.
.uk-grid-width-small-* Влияет на ширину устройства от 480px и выше.
.uk-grid-width-medium-* Влияет на ширину устройства от 768px и выше.
.uk-grid-width-large-* Влияет на ширину устройства от 960px и выше.
.uk-grid-width-xlarge-* Влияет на ширину устройства от 1220px и выше.

Пример

  • Блок
  • Блок
  • Блок
  • Блок
  • Блок

Разметка

<ul class="uk-grid uk-grid-width-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>