Сетка

Создайте полностью отзывчивые, плавные и стабильные сетки для своих проектов.

Обратите внимание, что в UIkit 3 сетка отличается от других фреймворков. Она динамическая, и может содержать любое число колонок. Вы больше не будете находиться в рамках какого-либо числа колонок! Условно установлены 6 вариантов фиксированной ширины в процентах, 5 предустановленных варианта фиксированной ширины в пикселях, а также ширина с применением flex (uk-child-width-expand@s и т.д.) и JS. Если, например, вы хотите сделать 12 колонок, задайте родительскому блоку класс семейства uk-child-width-expand и создайте внутри 12 дочерних блоков. Или 14. Или 100... Все блоки в данном случае будут иметь равную ширину. Все это подробно описано в компоненте Ширина. Пример создания 12 колоночной сетки смотрите в разделе примеры UIkit 3.

Адаптивная сетка UIkit 3 позволяет упорядочивать элементы блоков в столбцах. Она работает в связке с компонентом Ширины чтобы определить, сколько места в контейнере занимает каждый элемент, а также можно воспользоваться компонентом Flex для современного упорядочивания элементов сетки с помощью гибких контенеров на FlexBox.


Как использовать компонент Grid в UIkit 3. Сетка фреймворка.

Чтобы создать свой первый контейнер, добавьте атрибут data-атрибут uk-grid или data-uk-grid к элементу <div>. Добавьте дочерние элементы <div> для создания ячеек. По умолчанию все ячейки сетки укладываются по горизонтали. Чтобы разместить их как вам нужно, добавьте один из классов из компонента Width. Используйте класс .uk-child-width-expand для родительского блока, и он автоматически применит равную ширину к элементам вне зависимости от их количества.

Внимание В UIkit 3 отпала необходимость добавлять класс .uk-grid. После добавления data-атрибута он будет добавлен посредством JavaScript. Однако, если вы используете отложенную загрузку скриптов фреймворка UIkit подробнее об отложенной загрузке, класс должен быть добавлен, чтобы предотвратить прыжки и при загрузке.

<div uk-grid>
    <div></div>
    <div></div>
</div>

Внимание Нередко компонент Card используется внутри сетки. Это касается и других примеров, описанных в этой документации.

  • Item
    Item
    Item
  • <div class="uk-child-width-expand@s uk-text-center" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </div>
    </div>

Модификаторы отступов ячеек

В компоненте Grid отступы устанавливаются по умолчанию. Отступы уменьшается автоматически при изменении размера экрана. Для изменения отступов ячеек сетки используйте следующие классы:

Класс Описание
.uk-grid-small Добавьте этот класс, чтобы использовать небольшие отступы.
.uk-grid-medium Добавьте этот класс для применения отступов среднего размера, как по умолчанию, но без контрольных точек.
.uk-grid-large Добавьте этот класс, чтобы применить большой остступ с контрольными точками.
.uk-grid-collapse Добавьте этот класс, чтобы полностью удалить отступы и схлопнуть ячейки.
<div class="uk-grid-small" uk-grid>...</div>
  • Элемент
    Элемент
    Элемент
  • <div class="uk-grid-small uk-child-width-expand@s uk-text-center" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
    </div>
  • Элемент
    Элемент
    Элемент
  • <div class="uk-grid-medium uk-child-width-expand@s uk-text-center" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
    </div>
  • Элемент
    Элемент
    Элемент
  • <div class="uk-grid-large uk-child-width-expand@s uk-text-center" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
    </div>
  • Элемент
    Элемент
    Элемент
  • <div class="uk-grid-collapse uk-child-width-expand@s uk-text-center" uk-grid>
        <div>
            <div class="uk-background-muted uk-padding">Элемент</div>
        </div>
        <div>
            <div class="uk-background-primary uk-padding uk-light">Элемент</div>
        </div>
        <div>
            <div class="uk-background-secondary uk-padding uk-light">Элемент</div>
        </div>
    </div>

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

Вы можете легко расширять свои сетки с помощью вложенных сеток.

<div uk-grid>
    <div>
        <div uk-grid>
            <div></div>
            <div></div>
        </div>
    </div>
    <div>
        <div uk-grid>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
  • Элемент
    Элемент
    Элемент
  • <div class="uk-child-width-1-2 uk-text-center" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-child-width-1-2 uk-text-center" uk-grid>
                <div>
                    <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
                </div>
                <div>
                    <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
                </div>
            </div>
        </div>
    </div>

Модификатор разделения

Добавьте класс .uk-grid-divider для разделения ячеек сетки линиями. Этот класс можно комбинировать с модификаторами отступов. Когда сетка не будет вмещаться в размеры экрана и перестроится, разделительные линии станут горизонтальными.

<div class="uk-grid-divider" uk-grid>...</div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • <div class="uk-grid-divider uk-child-width-expand@s" uk-grid>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
    </div>

Равная высота колонок

Одна из лучших фишек UIkit 2 и 3 - возможность установки высоты ячеек. Добавьте класс .uk-grid-match родительскому блоку и посмотрите: Все вложенные элементы имеют одинаковую высоту! Пример создан с применением компонента Карточки.

<div class="uk-grid-match" uk-grid>....</div>
  • Элемент
    Элемент
    ...
    Элемент
    ...
    ...
  • <div class="uk-grid-match uk-child-width-expand@s uk-text-center" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
         </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент<br>...</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент<br>...<br>...</div>
        </div>
    </div>

Высота только одной ячейки

Вы также можете сопоставить высоту дочернего элемента только с одной ячейкой. Для этого добавьте класс .uk-grid-item-match для элемента сетки, высоте которого должны соответствовать все остальные элементы.

<div uk-grid>
    <div class="uk-grid-item-match"></div>
    <div></div>
</div>
  • Заголовок

    Lorem ipsum dolor sit amet.

    Заголовок

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • <div class="uk-child-width-expand@s" uk-grid>
        <div class="uk-grid-item-match">
            <div class="uk-card uk-card-default uk-card-body">
                <h3>Заголовок</h3>
                <p>
                    Lorem ipsum dolor sit amet.
                </p>
            </div>
         </div>
        <div>
            <h3>Заголовок</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </div>

Высота на JavaScript

Думаете, это все? Вы можете выбирать элементы по классам или ID и задавать им нужные параметры высоты. Добавьте параметр target: SELECTOR в атрибут uk-height-match родительского блока и делайте с высотой что хотите. Подробнее о вариантах высоты чтайте в инструкции к компоненту Height.

<div uk-grid uk-height-match="target: > div > .uk-card">
    <div>
        <div class="uk-card uk-card-default"></div>
    </div>
    <div>
        <div class="uk-card uk-card-default"></div>
    </div>
</div>
  • Элемент
    Элемент
    ...
    Элемент
    ...
    ...
  • <div class="uk-child-width-expand@s uk-text-center" uk-grid uk-height-match="target: > div > .uk-card">
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
         </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент<br>...</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент<br>...<br>...</div>
        </div>
    </div>

Сетка и ширина

Сетка в основном используется в сочетании с с компонентом Width. Это обеспечивает большую гибкость при определении ширины столбцов.

<div uk-grid>
    <div class="uk-width-auto@m"></div>
    <div class="uk-width-1-3@m"></div>
    <div class="uk-width-expand@m"></div>
</div>
  • Автоматически
    1-3
    Расширяемый
  • <div class="uk-text-center" uk-grid>
        <div class="uk-width-auto@m">
            <div class="uk-card uk-card-default uk-card-body">Автоматически</div>
        </div>
        <div class="uk-width-1-3@m">
            <div class="uk-card uk-card-default uk-card-body">1-3</div>
        </div>
        <div class="uk-width-expand@m">
            <div class="uk-card uk-card-default uk-card-body">Расширяемый</div>
        </div>
    </div>

Ширина дочерних элементов

Если вы хотите равномерно поделить ширину элементов сетки, можете воспользоваться одним из классов семейства .uk-child-width-*. В этом случае вам не придется проставлять классы для каждого из дочерних элементов.

<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>...</div>
  • Элемент
    Элемент
    Элемент
  • <div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-text-center" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
    </div>

Еще больше настроек описано в компоненте Width.


Сетка UIkit и гибкие контейнеры FlexBox

Вы можете легко комбинировать свою сетку с компонентом Flex. Известно, что FlexBox умеет изменять выравнивание, порядок, направление и перенос элементов. С применением Flex вы сможете, например, изменить порядок отображения ячеек для различных устройств. Конечно, все это работает вместе с модификаторами отступов ячеек и разделителя.

<div class="uk-flex-center" uk-grid>
    <div></div>
    <div class="uk-flex-first"></div>
</div>
  • Элемент 1
    Элемент 2
    Элемент 3
    Элемент 4
    Элемент 5
    Элемент 6
  • <div class="uk-grid-small uk-child-width-1-4@s uk-flex-center uk-text-center" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент 1</div>
        </div>
        <div class="uk-flex-last">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент 2</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент 3</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент 4</div>
        </div>
        <div class="uk-flex-first">
            <div class="uk-card uk-card-primary uk-card-body">Элемент 5</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент 6</div>
        </div>
    </div>

Собственная библиотека Masonry в UIkit

Вы можете использовать макет Masonry очень просто: добавьте в атрибут контейнера сетки параметр masonry: true.

<div uk-grid="masonry: true">...</div>
  • Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
  • <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="masonry: true">
        <div>
            <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 100px">Item</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 130px">Item</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 150px">Item</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 160px">Item</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 120px">Item</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Item</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 200px">Item</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 180px">Item</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Item</div>
        </div>
    </div>

Внимание Больше настроек компонента Grid Masonry.


Фильтрация и порядок отображения

Элементы сетки также могут быть отфильтрованы и отсортированы по категориям, названию, дате или другим метаданным. Ознакомьтесь с компонентом Фильтрация.


Параллакс в UIkit 3

Параллакс в UIkit также остался на своем месте, но стал еще лучше. Чтобы использовать его, добавьте параметр parallax: NUMBER в атрибут контейнера. Число устанавливается в пикселях.

<div uk-grid="parallax: 150">...</div>

Эффект параллакса может применяться к двум типам разметки. В следующем примере используются три столбца с тремя элементами в каждом.

  • Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
  • <div class="uk-child-width-expand@s uk-text-center" uk-grid="parallax: 150">
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Элемент</div>
            <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Элемент</div>
            <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Элемент</div>
            <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Элемент</div>
            <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Элемент</div>
            <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Элемент</div>
            <div class="uk-card uk-card-default uk-card-body uk-grid-margin">Элемент</div>
        </div>
    </div>

Эффект параллакса также применяется, если столбцы сетки переносятся на следующую строку, как показано в следующем примере.

  • Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
  • <div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-text-center" uk-grid="parallax: 150">
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </div>
    </div>

Внимание Вы можете просмотреть больше примеров в разделе примеры Grid Parallax.


Опции компонента

Любой из этих параметров может быть применен к атрибуту компонента. Разделяйте несколько вариантов точкой с запятой. Подробнее

Опция Значение По умолчанию Описание
margin String uk-grid-margin Этот класс добавляется к элементам, которые попадают в следующую строку, как правило, чтобы создать поле для предыдущей строки.
first-column String uk-first-column Этот класс добавляется к первому элементу в каждой строке.
masonry Boolean false Включает макет Masonry для этой сетки.
parallax Number 0 Значение параметра Параллакса. Только положительные целые числа. Значение False отключает эффект.

JavaScript

О правилах ипсользовании компонентов JavaScript читайте здесь.

Инициализация

UIkit.grid(element, options);