Макети у Markdown

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

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`	Максимальна висота рядка в пікселях

Розділ

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

Картка

Картка є універсальним контейнером, який дозволяє відображати зображення, відео або текст. Картки спроектовані таким чином, щоб вони могли адаптуватися до доступного простору в макеті. Використовуйте параметри height, min-height та ratio, щоб допомогти системі підтримувати правильний розмір.

Обкладинка

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

Якщо елемент обкладинки - це єдиний елемент на картці, він автоматично займе весь простір картки. Пам'ятайте, що, оскільки картка порожня, її висота буде рівна 0, якщо ви не вказали явно параметри height, min-height або ratio.

Ви також можете зробити елемент обкладинки фоном для картки, використовуючи параметр .cover. Ви можете поєднати .cover з параметрами .text-light або .text-dark а також .text-shadow, щоб забезпечити видимість тексту як у темному, так і в світлому режимах.

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

Параметр	Опис
`.contain`	Замість обрізання зображення, макет додасть пустий простір навколо зображення, щоб воно завжди було видимим
`.fill`	Розтягнути зображення, щоб воно відповідало розміру обкладинки, нехтуючи співвідношенням сторін
`.position-top`	Розмістити зображення так, щоб його верхня частина завжди була видимою (тобто обрізати нижню частину)
`.position-bottom`	Розмістити зображення так, щоб його нижня частина завжди була видимою (тобто обрізати верхню частину)
`.position-left`	Розмістити зображення так, щоб його ліва частина завжди була видимою (тобто обрізати праву частину)
`.position-right`	Розмістити зображення так, щоб його права частина завжди була видимою (тобто обрізати ліву частину)

Кнопки

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

Кольори

Ви можете використовувати параметри, щоб підкреслити картку на сторінці. Це корисно, коли ви створюєте макет з декількома картками і хочете підкреслити деякі з них.

.transparent

.lowest

.low

default

.high

.highest

.primary

.secondary

Параметри картки

Повний перелік параметрів, які можна додати до картки:

Параметр	Тип	Опис
`href`	`string`	Посилання, пов'язане з карткою
`height`	`integer`	Висота картки в пікселях (за замовчуванням автоматично)
`min-height`	`integer`	Мінімальна висота картки в пікселях
`ratio`	`integer`	Відношення сторін картки, ширина до висоти
`.cover`	`none`	Зображення обкладинки картки буде відображатися як фон
`.transparent`	`none`	Картка без фонового кольору
`.lowest`	`none`	Картка з найменшим акцентом (найсвітліший фон)
`.low`	`none`	Картка з низьким акцентом (світлий фон)
`.high`	`none`	Картка з високим акцентом (темний фон)
`.highest`	`none`	Картка з найвищим акцентом (найтемніший фон)
`.primary`	`none`	Основна картка (яскравий кольоровий фон)
`.secondary`	`none`	Вторинна картка (кольоровий фон)
`.text-dark`	`none`	Текст завжди буде чорним на картці, що корисно, коли відображається текст на яскравому малюнку
`.text-light`	`none`	Текст завжди буде білим на картці, що корисно, коли відображається текст на темному малюнку
`.text-shadow`	`none`	Текст буде мати тінь, що допомагає додати контраст при відображенні тексту на зображенні