Грід компонента, UIkit документація українською
Дозволяє створити повністю адаптивну, змінну та вкладену сітку для розмітки.
Сітка 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-* класи.