Грид

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

В грид Система 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-3
.uk-width-1-3
.uk-width-1-2
.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 и выше. Грид колонны укладывают на меньшие размеры.

Важно создать отступ между укладывая грид колонок, просто добавьте 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
.uk-width-large-1-1 .uk-visible-large

Грид желоб

Сетки автоматически создать горизонтальный желоб между колоннами и по вертикали между прежним и новым сетям. По умолчанию грид желоб шире на большие экраны.

Пример

Lorem ipsum
Lorem ipsum
Lorem ipsum

Большие желоба

Чтобы увеличить промежутки между столбцами, просто добавьте класс .uk-grid-large.

Пример

Lorem ipsum
Lorem ipsum
Lorem ipsum

Средний желоб

Применение средних желоб между грид столбцов, просто добавьте .uk-grid-medium класс.

Пример

Lorem ipsum
Lorem ipsum
Lorem ipsum

Небольшой желоб

Применять меньший желоб между грид столбцов, просто добавьте .uk-grid-small класс.

Пример

Lorem ipsum
Lorem ipsum
Lorem ipsum

Коллапс желоб

Снять желоб полностью, просто добавить .uk-grid-collapse класс.

Пример

Lorem ipsum
Lorem ipsum
Lorem ipsum

Вложенные грид

Вы можете легко расширить ваш грид разметка с вложенных сеток.

Пример

.uk-width-1-2
.uk-width-1-2
.uk-width-1-2

Разметки

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

Центр грид

Добавить .uk-container-center класс Утилита компонент центрировать грид столбец.

Пример

.uk-container-center

Грид делитель

Добавить .uk-grid-divider класс для раздельного грид столбцов с линии. Отделить решетки с горизонтальной линией, просто добавить класс к <hr> или <div> элемент.

Пример

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

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

Разметки

<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.
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.
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> элемент.

Пример

  • Box
  • Box
  • Box
  • Box
  • Box
  • Box

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

  • Box
  • Box
  • Box
  • Box
  • Box
  • Box
  • Box
  • Box

Разметки

<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 Делит грид в десятых.

Пример

  • Box
  • Box
  • Box
  • Box
  • Box

Разметки

<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 и выше.

Пример

  • Box
  • Box
  • Box
  • Box
  • Box

Разметки

<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>