Компонент Сетка : Grid

Создайте полностью отзывчивый, плавающий, резиновый макет модульной сетки с возможностью иметь непостоянную ширину и растягиваться в зависимости от ширины окна браузера (разрешения экрана монитора). Модификаторы. Grid Masonry. Эффект параллакса. Разметка. Примеры.

Система сетки в UIkit 3 позволяет упорядочивать элементы блоков в столбцах/колонках. Она работает в тесном сотрудничестве с компонентом Ширина, чтобы определить, сколько пространства займет каждый элемент контейнера; Grid можно комбинировать с компонентом Flex, чтобы в нужный момент выровнять и упорядочить элементы сетки.

Создание сетки

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

Класс .uk-child-width-expand позволит автоматически применить равную ширину к элементам, независимо от их количества.

Примечание Нет необходимости добавлять класс .uk-grid, так как он будет добавлен через JavaScript. Однако, если файлы JavaScript, фреймворка UIkit 3, используют атрибут defer, класс должен быть добавлен, чтобы предотвратить возможные скачки. 
<div uk-grid>
    <div></div>
    <div></div>
</div>
Примечание Часто карточки из компонента Карта используются внутри сетки. Это также относится к следующим примерам.

Пример

  • Модуль
    равная
    Модуль
    ширина
    Модуль
    элементов
  • <div class="uk-child-width-expand@s uk-text-center" uk-grid>
    <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>ширина</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Модуль<br>элементов</div>
    </div>
</div>

Модификатор «Зазор»

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

Класс Описание
.uk-grid-small Добавьте этот класс, чтобы применить небольшой зазор.
.uk-grid-medium Добавьте этот класс, чтобы применить средний зазор, такой как по умолчанию, но без точки останова (min-width: 1200px).
.uk-grid-large Добавьте этот класс, чтобы применить большой зазор с точками останова.
.uk-grid-collapse Добавьте этот класс, чтобы полностью удалить зазоры. 
<div class="uk-grid-small" uk-grid>...</div>

Примеры с зазорами (отступами)

  • Small
    Маленький
    Зазор
  • <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"><em>Small</em></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>
  • Medium
    Средний
    Зазор
  • <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"><em>Medium</em></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-child-width-expand@s uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body"><em>По умолчанию</em></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>
  • Large
    Большой
    Зазор
  • <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"><em>Large</em></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 Collapse (без отступов)

  • Блоки
    Без
    Отступов
  • <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>
  • После того как встала на весы, я поняла, что на фантике слово "Коровка" - это не название, а предупреждение.
    Осторожно! Невиданная афера в городах! Злоумышленники под видом плоскогубцев продают пассатижи!
    Аленушка была первой женщиной, доказавшей, что все мужики козлы, стоит им только напиться...
  • <div class="uk-grid-divider uk-child-width-expand@s" uk-grid>
    <div>После того как встала на весы, я поняла, что на фантике слово "Коровка" - это не название, а предупреждение.</div>
    <div>Осторожно! Невиданная афера в городах! Злоумышленники под видом плоскогубцев продают пассатижи!</div>
    <div>Аленушка была первой женщиной, доказавшей, что все мужики козлы, стоит им только напиться...</div>
</div>

Одинаковая высота столбцов / колонок

Чтобы сделать высоту ячеек одинаковыми, добавьте класс .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>

Цели для конкретного выбора элементов : Targets

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

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

Grid : сетка и ширина

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

<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>
  • Auto
    1-3
    Expand
  • <div class="uk-text-center" uk-grid>
    <div class="uk-width-auto@m">
        <div class="uk-card uk-card-default uk-card-body">Auto</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">Expand</div>
    </div>
</div>

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

Если столбцы сетки равномерно разделены, вы можете добавить один из классов .uk-child-width-* в контейнер сетки вместо добавления классов для каждого элемента.

<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l" uk-grid>...</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>
    <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 и Flex

Вы можете легко комбинировать сетку с компонентом Flex. Таким образом, вы можете изменить выравнивание, порядок, направление и перенос элементов. Это позволяет, например, перевернуть (изменить) порядок отображения ячеек для более широких экранов / областей просмотра. Все это прекрасно работает вместе с модификаторами Зазор и Разделитель.

<div class="uk-flex-center" uk-grid>
    <div></div>
    <div class="uk-flex-first"></div>
</div>

Пример с использованием Grid и Flex

  • Блок 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 (кирпичная кладка)

Если ячейки сетки имеют разную высоту, можно добавить макет кирпичная кладка, для отображения блоков в компактно-сложенном виде, добавив к атрибуту masonry: true. Masonry анализирует высоту каждого блока и заполняет максимально экономя пространство.

<div uk-grid="masonry: true">...</div>
  • Блок
    Блок
    Блок
    Блок
    Блок
    Блок
    Блок
    Блок
    Блок
  • <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">Блок</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 130px">Блок</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 150px">Блок</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 160px">Блок</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 120px">Блок</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Блок</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 200px">Блок</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 180px">Блок</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Блок</div>
    </div>
</div>
Примечание Вы можете просмотреть больше примеров для Grid Masonry в тестах.

Фильтр и сортировка

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

Для сортировки элементов с помощью перетаскивания обратите внимание на компонент Сортируемые элементы

Параллакс

Чтобы перемещать отдельные столбцы сетки с разными скоростями во время прокрутки, просто добавьте атрибут parallax: NUMBER. Число устанавливает смещение параллакса в пикселях.

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

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

  • Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
    Элемент
  • <div class="uk-child-width-expand@s uk-text-center" uk-grid="parallax: 170">
    <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: 140">
    <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 в тестах.

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

При использовании компонента Grid к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

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

UIkit.grid(element, options);
Документация
Компоненты