CSS: two-column ​

div[class~="instui-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——

相關 ​