CSS: two-column

div[class~="instui-two-column"] — Bố cục hai cột với vùng nội dung bên trái và bên phải.

✅ Sử dụng Two-Column khi:

• Bạn có hai khu vực nội dung có tầm quan trọng gần như bằng nhau

• So sánh hoặc đối chiếu hai bộ nội dung cạnh nhau

• Xây dựng bố cục phản hồi (responsive) mà xếp chồng trên thiết bị di động 🚫 Không sử dụng Two-Column khi:

• Một cột chiếm ưu thế trên trang — hãy dùng bố cục bất đối xứng thay thế

• Nội dung không được hưởng lợi từ trình bày cạnh nhau

Khả năng truy cập

• Đảm bảo cả hai cột có thể nhận biết và sử dụng trên các khung nhìn hẹp
• Sử dụng vùng mốc ngữ nghĩa (ví dụ: <section>) để bao bọc nội dung cột
• Duy trì khoảng cách và độ tương phản đủ giữa các cột

Sử dụng

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

Các ví dụ

Phần

Phần	Mô tả
.instui-divider	Phân cách trực quan tùy chọn giữa các cột.
.instui-left	Khu vực nội dung cột trái.
.instui-right	Khu vực nội dung cột phải.

Trạng thái

Trạng thái	Mô tả
:optional	—

Điều kiện

Kiểu	Truy vấn	Mô tả
media	(max-width: 768px)	—

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-color-border	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Liên quan

• page-layout