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

Связанные ​