CSS: two-column

div[class~="instui-two-column"] — макет з двома колонками з лівою та правою областями вмісту.

✅ Використовуйте Two-Column коли:

• У вас є дві області вмісту приблизно однакової важливості

• Потрібно порівняти або протиставити два набори вмісту поруч

• Створюєте адаптивний макет, що складається вертикально на мобільних пристроях 🚫 Не використовуйте Two-Column коли:

• Одна колонка домінує на сторінці — замість цього використовуйте асиметричний макет

• Вміст не виграє від подання поруч

Доступність

• Забезпечте, щоб обидві колонки були сприйнятними та придатними для використання на вузьких вікнах перегляду
• Використовуйте семантичні орієнтири (наприклад, <section>), щоб обгортати вміст колонок
• Підтримуйте достатній простір і контраст між колонками

Використання

@import "@pantoken/plugin-layouts/layouts.css";

Частини

Частина	Опис
.instui-divider	Необов’язковий візуальний розділювач між колонками.
.instui-left	Область вмісту лівої колонки.
.instui-right	Область вмісту правої колонки.

Стані

Стан	Опис
:optional	—

Умови

Тип	Запит	Опис
media	(max-width: 768px)	—

Використано токенів

Token	Тип	Значення
--instui-color-border	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Пов'язані

• page-layout