Макети

Ви можете комбінувати та відображати вміст у макетах сітки, рядка та колонки. Ви можете поєднувати різні макети для досягнення більш складних розміщень. Існує три основні типи макетів:

column - макет розміщує дочірні елементи в одній колонці з невеликим проміжком між ними
row - макет розміщує дочірні елементи в одному рядку з невеликим проміжком між ними
grid - макет розміщує дочірні елементи в сітці з 2, 4 або 6 колонками

Ви можете використовувати будь-які елементи всередині блоку макету, але макети найкраще працюють з елементами div та card.

Макети автоматично адаптуються до менших розмірів екранів, щоб забезпечити достатній простір для всіх елементів.

Колонка

Колонка — це простий макет, який розміщує свої дочірні елементи в колонці з невеликим проміжком між ними. Ми рекомендуємо починати ваші макети з колонки, а потім додавати макети grid та row як дочірні елементи.

Використовуйте наступний синтаксис для визначення макету колонки:

Параметр	Тип	Опис
`item-height`	`integer`	Висота елементів у пікселях (автоматично за замовчуванням)
`item-min-height`	`integer`	Мінімальна висота елементів у пікселях
`item-max-height`	`integer`	Максимальна висота елементів у пікселях

Рядок

Рядок — це простий макет, який розміщує свої дочірні елементи в рядку з невеликим проміжком між ними. Коли елементи не вміщуються на екрані, макет рядка переносить їх на наступний рядок. На малих екранах макет рядка відображається як колонка.

Використовуйте наступний синтаксис для визначення макету рядка:

Параметр	Тип	Опис
`item-width`	`integer`	Ширина елементів у пікселях
`item-min-width`	`integer`	Мінімальна ширина елементів у пікселях (за замовчуванням 300px)
`item-max-width`	`integer`	аксимальна ширина елементів у пікселях

Сітка

Макет сітки розміщує свої дочірні елементи в 2, 4 або 6 стовпцях з невеликим проміжком між ними. На меншому екрані кількість стовпців ділиться на два. Ви можете вказати параметри 'col-span' та 'row-span' для дочірніх блоків, щоб розмістити елементи через кілька стовпців.

Використовуйте наступний синтаксис для визначення макету сітки:

Параметр	Тип	Опис
`columns`	`integer`	Кількість стовпців 2, 4 або 6 (за замовчуванням)
`row-height`	`integer`	Висота рядків у пікселях (за замовчуванням 150px)
`row-min-height`	`integer`	Мінімальна висота рядків у пікселях
`row-max-height`	`integer`	Максимальна висота рядків у пікселях

Розділ

Розділ - це простий контейнер, який обгортає фрагмент документа. Розділи корисні, коли ви хочете згрупувати кілька елементів разом без застосування будь-якого стилю.

Картки

Картка є універсальним контейнером, який дозволяє відображати зображення, відео або текст.

Якщо перший елемент картки є зображенням або відео, цей елемент буде використаний як обкладинка (якщо він не має параметра '.not-a-cover'). Елемент обкладинки відображається зверху картки або як фон для вмісту картки (коли картка має параметр '.cover').

Якщо останній елемент картки є абзацом, який містить лише посилання, ці посилання відображаються як кнопки під карткою.

Параметр	Тип	Опис
`href`	`string`	Посилання, пов’язане з карткою
`height`	`integer`	Висота картки в пікселях (автоматично за замовчуванням)
`min-height`	`integer`	Мінімальна висота картки в пікселях
`ratio`	`double`	Співвідношення сторін картки як ширина до висоти

Класи

Можливі значення для параметра class. Ви можете вказати декілька значень, розділених пробілом.

Параметр	Опис
`cover`	Зображення обкладинки картки буде відображено як фон
`lowest`	Найнижчий рівень акценту картки (найсвітліший фон)
`low`	Низький рівень акценту картки (світлий фон)
`high`	Високий рівень акценту картки (темний фон)
`highest`	Найвищий рівень акценту картки (найтемніший фон)
`primary`	Основна картка (яскравий фон)
`secondary`	Додаткова картка (кольоровий фон)
`text-dark`	Tекст завжди буде чорним на картці, це корисно при відображенні тексту на яскравому зображенні
`text-light`	Tекст завжди буде білим на картці, це корисно при відображенні тексту на темному зображенні
`text-shadow`	Текст матиме тінь, це допомагає додати контрасту при відображенні тексту на зображенні