Компонент Сетка 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>
-
-
<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 |
Добавьте один из этих классов, чтобы полностью удалить зазор из столбца или строки. |
- столбецcolumnsmallстрокаrowlarge
-
<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>
-
-
<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>
- 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>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.grid(element, options);