Создайте полностью отзывчивые, плавные и стабильные сетки для своих проектов.
Обратите внимание, что в 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.
Чтобы создать свой первый контейнер, добавьте атрибут 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 используется внутри сетки.
Это касается и других примеров, описанных в этой документации.
Компонент Сетка имеет отступы по умолчанию, которые автоматически уменьшается в зависимости от контрольной точки, при уменьшении ширины экрана.
Вы можете выбрать другой размер отступа из списка.
| Класс |
Описание |
.uk-grid-small |
Этот класс применяет небольшой отступ |
.uk-grid-medium |
Этот класс применяет средний отступ |
.uk-grid-large |
Этот класс применяет большой отступ |
.uk-grid-collapse |
Этот класс удаляет отступ совсем. |
<div class="uk-grid-small" uk-grid>...</div>
Ряды и колонки
Чтобы использовать другой отступ к конкретному к столбцу или строке, добавьте один из следующих классов.
| Класс |
Описание |
.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 |
Добавьте один из этих классов, чтобы убрать отступ у столбца или строки. |
<div class="uk-grid-column-small uk-grid-row-large" uk-grid>...</div>
Модификаторы отступов ячеек
В компоненте Grid отступы устанавливаются по умолчанию. Отступы уменьшается автоматически
при изменении размера экрана. Для изменения отступов ячеек сетки используйте следующие классы:
| Класс |
Описание |
.uk-grid-small |
Добавьте этот класс, чтобы использовать небольшие отступы. |
.uk-grid-medium |
Добавьте этот класс для применения отступов среднего размера, как по умолчанию, но без контрольных точек. |
.uk-grid-large |
Добавьте этот класс, чтобы применить большой остступ с контрольными точками. |
.uk-grid-collapse |
Добавьте этот класс, чтобы полностью удалить отступы и схлопнуть ячейки. |
<div class="uk-grid-small" uk-grid>...</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>
Добавьте класс .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>
Вы также можете сопоставить высоту дочернего элемента только с одной ячейкой. Для этого добавьте класс .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>
Думаете, это все? Вы можете выбирать элементы по классам или 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>
Сетка в основном используется в сочетании с с компонентом 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>
Если вы хотите равномерно поделить ширину элементов сетки, можете воспользоваться одним из классов семейства .uk-child-width-*.
В этом случае вам не придется проставлять классы для каждого из дочерних элементов.
<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>...</div>
Еще больше настроек описано в компоненте Width.
Вы можете легко комбинировать свою сетку с компонентом Flex.
Известно, что FlexBox умеет изменять выравнивание, порядок, направление и перенос элементов.
С применением Flex вы сможете, например, изменить порядок отображения ячеек для различных устройств.
Конечно, все это работает вместе с модификаторами отступов ячеек и разделителя.
<div class="uk-flex-center" uk-grid>
<div></div>
<div class="uk-flex-first"></div>
</div>
Вы можете использовать макет Masonry очень просто: добавьте в атрибут контейнера сетки параметр masonry: true.
<div uk-grid="masonry: true">...</div>
Внимание Больше настроек компонента Grid Masonry.
Элементы сетки также могут быть отфильтрованы и отсортированы по категориям, названию, дате или другим метаданным.
Ознакомьтесь с компонентом Фильтрация.
Параллакс в UIkit также остался на своем месте, но стал еще лучше.
Чтобы использовать его, добавьте параметр parallax: NUMBER в атрибут контейнера.
Число устанавливается в пикселях.
<div uk-grid="parallax: 150">...</div>
Эффект параллакса может применяться к двум типам разметки.
В следующем примере используются три столбца с тремя элементами в каждом.
Эффект параллакса также применяется, если столбцы сетки переносятся на следующую строку, как показано в следующем примере.
Внимание Вы можете просмотреть больше примеров в разделе примеры Grid Parallax.
Любой из этих параметров может быть применен к атрибуту компонента.
Разделяйте несколько вариантов точкой с запятой. Подробнее
| Опция |
Значение |
По умолчанию |
Описание |
margin |
String |
uk-grid-margin |
Этот класс добавляется к элементам, которые попадают в следующую строку, как правило, чтобы создать поле для предыдущей строки. |
first-column |
String |
uk-first-column |
Этот класс добавляется к первому элементу в каждой строке. |
masonry |
Boolean |
false |
Включает макет Masonry для этой сетки. |
parallax |
Number |
0 |
Значение параметра Параллакса. Только положительные целые числа. Значение False отключает эффект. |
О правилах ипсользовании компонентов JavaScript читайте здесь.
UIkit.grid(element, options);
