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

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

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

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

Чтобы создать контейнер сетки, добавьте атрибут 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>
Блоки
Без
Отступов
<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>

Зазор: Column и Row

Чтобы применить другой зазор только к столбцу или строке, добавьте один из следующих классов.

Класс Описание
.uk-grid-column-small
.uk-grid-row-small 		Добавьте один из этих классов, чтобы применить небольшой зазор к столбцу или строке.
.uk-grid-column-medium
.uk-grid-row-medium 		Добавьте один из этих классов, чтобы применить средний зазор к столбцу или строке.
.uk-grid-column-large
.uk-grid-row-large 		Добавьте один из этих классов, чтобы применить большой зазор к столбцу или строке.
.uk-grid-column-collapse
.uk-grid-row-collapse 		Добавьте один из этих классов, чтобы полностью удалить зазор из столбца или строки.
столбец
column
small
строка
row
large
<div class="uk-grid-column-small uk-grid-row-large uk-child-width-1-3@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">column</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">small</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">row</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">large</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-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>

-match: Единая высота

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

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

-match: Соответствие с ячейкой

Соответствие только с одной ячейкой

Вы также можете установить высоту прямого потомка только для одной ячейки. Для этого добавьте класс .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>

-match: Высота цели

Цели для конкретного выбора элементов : 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 анализирует и заполняет высоту каждого блока максимально экономя пространство. Для отображения блоков в компактно-сложенном виде, если ячейки сетки имеют разную высоту, можно добавить макет кирпичной кладки установив опцию masonry со значением pack или next.

Masonry Описание
pack Сортирует элементы по столбцам с наибольшим пространством, чтобы сделать высоту столбцов как можно более одинаковой.
next Использует естественный порядок элементов. 
<div uk-grid="masonry: pack">...</div>

Больше примеров для Grid Masonry можно посмотреть в тестах.

Блок 1
Блок 2
Блок 3
Блок 4
Блок 5
Блок 6
Блок 7
Блок 8
Блок 9
<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="masonry: pack">
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 100px">Блок 1</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 180px">Блок 2</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 150px">Блок 3</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 160px">Блок 4</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 120px">Блок 5</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Блок 6</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 200px">Блок 7</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 180px">Блок 8</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 220px">Блок 9</div>
    </div>
</div>

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

Фильтруйте или сортируйте элементы сетки. Элементы сетки могут быть отфильтрованы и отсортированы по категории, дате или другим метаданным независимо от того как элементы расположены. Посмотрите на потрясающий компонент Фильтр от 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>

Эффект параллакса: дополнительные параметры

Чтобы настроить продолжительность параллакса grid-сетки, установите опции parallax-start и parallax-end.

Опция parallax-start
Определяет, когда запускается анимация. Значение по умолчанию 0 означает, что верхняя граница сетки и нижняя граница области просмотра пересекаются.
Опция parallax-end
Определяет, когда анимация заканчивается. Значение по умолчанию 0 означает, что нижняя граница сетки и верхняя граница области просмотра пересекаются.

Значения можно задавать в любых единицах измерения, а именно vh, % и px. Единица измерения % относится к высоте сетки. Оба варианта допускают использование базовых математических операндов + и -. 

<div uk-grid="parallax: 150; parallax-start: 100%; parallax-end: 100%;">…</div>

Чтобы выровнять параллакс сетки, если столбцы имеют разную высоту, например, в сетках masonry, установите параметр parallax-justify: true, чтобы все столбцы сетки достигали низа одновременно. Установите parallax: 0, чтобы столбцы перемещались только по высоте до тех пор, пока они не выровняются. Но, конечно, можно установить и дополнительное значение смещения параллакса. 

<div uk-grid="parallax: 0; parallax-justify: true; masonry: pack">…</div>
  • Элемент 1
  • Элемент 2
  • Элемент 3
  • Элемент 4
  • Элемент 5
  • Элемент 6
  • Элемент 7
  • Элемент 8
  • Элемент 9
<ul class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="parallax: 0; parallax-justify: true; masonry: pack">
    <li>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 100px">Элемент 1</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 170px">Элемент 2</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 300px">Элемент 3</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 130px">Элемент 4</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 100px">Элемент 5</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 240px">Элемент 6</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 160px">Элемент 7</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 200px">Элемент 8</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 220px">Элемент 9</div>
    </li>
</ul>
Примечание Вы можете просмотреть больше примеров Grid Parallax в тестах.

Параметры для атрибута

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

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

Опция Значение По умолчанию Описание
margin String uk-grid-margin Этот класс добавляется к элементам, которые разбиваются на следующую строку, как правило, для создания поля для предыдущей строки.
first-column String uk-first-column Этот класс добавляется к первому элементу в каждой строке.
masonry String, Boolean false, pack, next Включает макет Masonry для этой сетки.
parallax Number 0 Значение смещения (сдвига) параллакса. Значение может быть в vh, % и px. False отключает эффект параллакса (по умолчанию).
parallax-start Length 0 Начальное смещение. Значение может быть в vh, % и px. Поддерживаются основные математические операнды + и -. Значение по умолчанию 0 означает, что верхняя граница сетки и нижняя граница области просмотра пересекаются.
parallax-end Length 0 Конечное смещение. Значение может быть в vh, % и px. Поддерживаются операнды математики + и -. Значение по умолчанию 0 означает, что нижняя граница сетки и верхняя граница области просмотра пересекаются.
parallax-justify Boolean false При включенном параллаксе все колонки достигнут низа одновременно.

JavaScript

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

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

UIkit.grid(element, options);