Грид

Позволяет создать полностью адаптивную, изменяемую и вложенную сетку для разметки.

Сетка UIkit придерживает подход mobile-first и вмещает до 10 колонок. Используются блоки с предопределенными классами внутри каждого элемента, которые определяют ширину столбца. Вы можете комбинировать грид классы из Компонента Flex, хотя это работает только в современных браузерах.

Использование

Чтобы создать папку грид Емкость, добавляем .uk-grid класс для родительского элемента. Добавьте один из .uk-width-* классы для дочерних элементов, чтобы определить, сколько единиц должно быть по размеру. В грид поддерживает 1, 2, 3, 4, 5, 6 и 10 блока подразделений. Эта Таблица дает вам краткий обзор uk-width-* классы, которые могут быть применены для подразделений.

Класс	Описание
`.uk-width-1-1`	Заполняет 100% доступной ширины.
`.uk-width-1-2`	Делит грид пополам.
`.uk-width-1-3` to `.uk-width-2-3`	Делит грид на трети.
`.uk-width-1-4` to `.uk-width-3-4`	Делит грид в четверти.
`.uk-width-1-5` to `.uk-width-4-5`	Делит грид в пятых.
`.uk-width-1-6` to `.uk-width-5-6`	Делит грид в шестых.
`.uk-width-1-10` to `.uk-width-9-10`	Делит грид в десятых.

Мы намеренно построили избыточность в каждый набор классов юнитов, поэтому то, что, например .uk-width-5-10 класс будет работать так же хорошо, как .uk-width-1-2.

Пример

Внимательнее посмотрите на следующие грид пример, который дает Вам большой обзор всех основных .uk-width-* классы.

.uk-width-1-3

.uk-width-1-2

.uk-width-3-10

.uk-width-7-10

Примечание на грид отсутствие стиля сопутствующих CSS. В нашем примере мы использовали панели из Панель компонент.

Разметки

Вот простой пример кода, как по умолчанию грид С 2 колонок будет выглядеть:

<div class="uk-grid">
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

Адаптивный Ширина

UIkit содержит ряд очень полезных aдаптивный классов ширины. В основном они работают так же, как обычной ширины классов, если они имеют префикс, так что они лишь влияние на определенные точки останова. Эти классы могут быть объединены с классами видимости от Утилита компонент. Это здорово, чтобы регулировать разметка и контент для разных размеров устройства.

Класс	Описание
`.uk-width-*`	Влияет на все устройства Ширин, грид столбцы пребывания бок о бок.
`.uk-width-small-*`	Влияет устройств шириной от 480px и выше. Грид колонны укладывают на меньшие размеры.
`.uk-width-medium-*`	Влияет устройств шириной от 768px и выше. Грид колонны укладывают на меньшие размеры.
`.uk-width-large-*`	Влияет устройств шириной от 960px и выше. Грид колонны укладывают на меньшие размеры.

Важно Для установки отступа между колонками элементов Grid, просто добавьте data-uk-grid-margin атрибут.

Пример

.uk-width-medium-1-2 .uk-width-large-1-3

.uk-hidden-medium .uk-width-large-1-3

.uk-width-medium-1-2 .uk-width-large-1-3

.uk-width-1-2 .uk-width-medium-1-3

.uk-hidden-small .uk-width-medium-1-3

.uk-width-1-2 .uk-width-medium-1-3

.uk-width-1-1 .uk-visible-small

.uk-width-medium-1-1 .uk-visible-medium

<div class="uk-grid uk-grid-divider">...</div>
<hr class="uk-grid-divider">
<div class="uk-grid uk-grid-divider">...</div>

Примечание горизонтальный делитель не может быть применен к сетям с любым из uk-push-* или uk-pull-* классы.

Источник заказ

Вы можете изменить порядок отображения столбцов, чтобы сохранить определенный порядок столбцов в исходном коде. Добавьте один из .uk-push-* классы, чтобы переместить столбец вправо и добавить один из .uk-pull-* классы, чтобы переместить столбец влево. Это позволяет Вам, например, перевернуть столбцы' порядок отображения для более широких видовых экранов. Классы могут также использоваться для смещения колонн, создавая дополнительное пространство между ними.

Источник заказ-это полезно для SEO и aдаптивный конструкция, потому что в узких видовых экранов в грид будут отображаться в соответствии с исходным приказом разметки.

Примечание Эта функция работает только в сочетании с одним из .uk-width-medium-* классы.

Пример

.uk-width-medium-1-2 .uk-push-1-2

.uk-width-medium-1-2 .uk-pull-1-2

.uk-width-medium-2-5 .uk-push-3-5

.uk-width-medium-2-5 .uk-pull-2-5

Разметки

<div class="uk-grid">
    <div class="uk-width-medium-1-2 uk-push-1-2">...</div>
    <div class="uk-width-medium-1-2 uk-pull-1-2">...</div>
</div>

Матч высоты колонки

В Грид компонент использует адаптируемого блока, поэтому высоту грид столбцов подбирается автоматически. Чтобы добиться такого же эффекта в старых браузерах, которые не поддерживают адаптируемого блока, просто добавьте data-uk-grid-match атрибут вашего грид. Если ваш грид обертывания в несколько строк, только грид столбцов в пределах одной строки совпадают. Чтобы соответствовать грид колонны поперек всех рядов просто использовать data-uk-grid-match="{row: false}".

Пример

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.

Разметки

<div class="uk-grid" data-uk-grid-match>...</div>

Примечание Если грид столбцы добавляются шириной 100%, то их высота будет больше соответствовать. Это имеет смысл, например, если они расположены вертикально в более узких видовых экранов.

Матч высоту панелей

Если вы хотите, чтобы соответствовать высоте панели в грид, просто добавьте .uk-grid-match класс. При использовании данных атрибутов, вам нужно добавить {target:'.uk-panel'} селектор.

Пример

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.

Разметки

<div class="uk-grid uk-grid-match" data-uk-grid-match="{target:'.uk-panel'}">
    <div class="uk-width-medium-1-3">
        <div class="uk-panel">...</div>
    </div>
</div>

Оберните несколько строк

Вы также можете создать грид с таким количеством столбцов, сколько вы хотите, который автоматически ворваться в следующей строке. Просто добавить data-uk-grid-margin атрибут, чтобы создать отступ между грид строк. Обычно этот разметка построен с помощью <ul> элемент.

Пример

Примечание Вы можете также применить настраиваемую ширину вашего грид столбцов. Просто добавьте .uk-width класс и использовать встроенный стиль, чтобы определить ширину. В этом примере используются фиксированные значения пикселов для ширины, как и с изображениями.

Разметки

<ul class="uk-grid" data-uk-grid-margin>

    <!-- These elements have a width in percent -->
    <li class="uk-width-medium-1-5">...</li>
    <li class="uk-width-medium-3-10">...</li>

    <!-- These elements have a width in pixel -->
    <li class="uk-width" style="width: 100px;">...</li>
    <li class="uk-width" style="width: 150px;">...</li>

</ul>

Даже грид столбцы

Чтобы создать грид чьи дочерние элементы' Ширина поровну, Вы не должны применять один и тот же класс для каждого элемента списка в грид. Просто добавьте один из .uk-grid-width-* классам в грид себе.

Класс	Описание
`.uk-grid-width-1-2`	Делит грид пополам.
`.uk-grid-width-1-3`	Делит грид на трети.
`.uk-grid-width-1-4`	Делит грид в четверти.
`.uk-grid-width-1-5`	Делит грид в пятых.
`.uk-grid-width-1-6`	Делит грид в шестых.
`.uk-grid-width-1-10`	Делит грид в десятых.

Пример

Разметки

<ul class="uk-grid uk-grid-width-1-5">
    <li>...</li>
    <li>...</li>
</ul>

Адаптивный Ширина

UIkit также содержит aдаптивный грид Ширина классы. Вы можете применить эти для поддержания одинакового размера грид столбцы, независимо от устройства Ширина.

Класс	Описание
`.uk-grid-width-*`	Влияет на все устройства шириной.
`.uk-grid-width-small-*`	Влияет устройств шириной от 480px и выше.
`.uk-grid-width-medium-*`	Влияет устройств шириной от 768px и выше.
`.uk-grid-width-large-*`	Влияет устройств шириной от 960px и выше.
`.uk-grid-width-xlarge-*`	Влияет устройств шириной от 1220px и выше.

Пример

Разметки

<ul class="uk-grid uk-grid-width-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5">
    <li>...</li>
    <li>...</li>
</ul>