Создание 12 колоночной сетки

Напоминаем, что в UIkit 3 можно создать сетку с любым количеством колонок. В этом примере создадим динамическую сетку UIkit 3 вместе с компонентом Плитка.

Сетка с равными размерами ячеек

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
  • <div class="uk-child-width-expand@l uk-child-width-auto@s uk-text-center uk-grid-small" uk-grid>
    <div>
    <div class="uk-tile uk-tile-muted">1</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">2</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">3</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">4</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">5</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">6</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">7</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">8</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">9</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">10</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">11</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">12</div>
    </div>
    </div>

Для создания сетки к родителькому контейнеру добавляем атрибут uk-grid или data-uk-grid. Проставляем класс .uk-child-width-expand для установки одинаковой ширины всем ячейкам. Класс .uk-grid-small используем для установки маленьких отступов между ячейками — 15px. Дочерним элементам ничего проставлять не нужно. В результате все дочерние элементы получат свойство flex-grow: 1.

Размер ячейки с шириной содержимого

Заменим класс .uk-child-width-expand на .uk-child-width-auto.

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
  • <div class="uk-child-width-auto uk-text-center uk-grid-small" uk-grid>
    <div>
    <div class="uk-tile uk-tile-muted">1</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">2</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">3</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">4</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">5</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">6</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">7</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">8</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">9</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">10</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">11</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">12</div>
    </div>
    </div>

Смешанная ширина в сетке

Добавим одному элементу ширину, равную контенту, а другому фиксированную:

  • Текст
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
  • <div class="uk-child-width-expand@s uk-text-center uk-grid-small" uk-grid>
    <div class="uk-width-auto">
    <div class="uk-tile uk-tile-secondary">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">2</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">3</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">4</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">5</div>
    </div>
    <div class="uk-width-1-6@s">
    <div class="uk-tile uk-tile-primary">6</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">7</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">8</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">9</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">10</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">11</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">12</div>
    </div>
    </div>

В этом примере мы всего лишь добавили класс .uk-width-auto к первой ячейке и класс .uk-width-1-6@s к центральной ячейке. Для выделения этих ячеек использованы классы .uk-tile-secondary — темный, .uk-tile-primary — синий.

Ширина по количеству содержимого на примере

Если заменить класс .uk-child-width-expand на .uk-child-width-auto и добавить в ячейки текст, сетка в 12 колонок не сможет уместиться в одной строке, и ячейки перенесутся на следующую. Добавим к родительскому элементу класс .uk-margin, чтобы вертикальные отступы проставились автоматически. Сожмите окно браузера, и вы увидите, что перенос будет происходить и дальше, при этом отображение всегда будет корректным.

  • Текст
    Много текста
    Текст
    Текст
    Текст
    Текст
    Текст
    Текст
    Текст
    Текст
    Текст
  • <div class="uk-child-width-auto uk-margin uk-text-center uk-grid-small" uk-grid>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Много текста</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted"><span uk-icon="icon: desktop"></span>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    </div>

Равная высота колонок

Контент в ячейках может быть разным, поэтому и высота ячеек способна изменяться, что сделает вид сетки отвратительным.
Взгляните на пример ниже: знакомо?

Текст
Очень очень очень много разного текста
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст

В UIkit это легко исправить с помощью класса .uk-grid-match или компонента Высота. Просто добавим атрибут uk-height-match к родительскому блоку и нацелимся на элементы, которые должны иметь одинаковую высоту. В нашем случае необходима одинаковая высота плиток, поэтому нацеливаемся на класс .uk-tile. Получится так: uk-height-match=".uk-tile". Используйте этот вариант в тяжелых случаях, когда требуется установить равную высоту для элементов, вложенных в ячейки.

Аналогично будет выглядеть сетка в случае добавления класса .uk-grid-match.

  • Текст
    Очень очень очень много разного текста
    Текст
    Текст
    Текст
    Текст
    Текст
    Текст
    Текст
    Текст
    Текст
  • <div class="uk-child-width-auto uk-margin uk-text-center uk-grid-small" uk-height-match=".uk-tile" uk-grid>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Очень очень очень много разного текста</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted"><span uk-icon="icon: check; ratio: 2"></span>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">Текст</div>
    </div>
    </div>