Grid. Система сетки на базе UIkit 2

• Применение
• Адаптивная ширина
• Зазоры Grid
• Вложенные гриды
• Центрирование грида
• Грид-разделитель
• Реверс. Порядок отображения
• Отзывчивая высота столбцов
• Перенос нескольких строк
• Равные колонки грида
• Адаптивные классы

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

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

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

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

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

Cетка с 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>

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

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

Пример

Grid-зазоры

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

Пример

Large зазор

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

Пример

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

Medium зазор

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

Пример

Small зазор

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

Пример

Collapse зазор

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

Пример

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

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

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

Пример

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

Примеры

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

Пример

<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-*, чтобы переместить столбец влево.

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

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

Пример

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

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

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

Пример

<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-контейнеру и всё будет работать как задумано!

Пример

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

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

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

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

Пример

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

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