Компонент Сетка : 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>
Примеры с зазорами (отступами)
-
-
<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>
-
-
<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>
-
-
<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>
-
-
<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>
-
Auto1-3
-
<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>
Фильтр и сортировка
Фильтруйте или сортируйте элементы сетки. Элементы сетки могут быть отфильтрованы и отсортированы по категории, дате или другим метаданным независимо от того как элементы расположены. Посмотрите на потрясающий компонент Фильтр от 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 к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опция | Значение | По умолчанию | Описание |
---|---|---|---|
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);