CSS: two-column ​

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

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

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

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

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

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

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

Доступність ​

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

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

css
@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——

Пов'язані ​