CSS: two-column ​

div[class~="instui-two-column"] — تخطيط ذو عمودين بمناطق محتوى يسار ويمين.

✅ استخدم تخطيط العمودين عندما:

  • لديك منطقتا محتوى لهما أهمية متقاربة

  • لمقارنة أو تباين مجموعتين من المحتوى جنبًا إلى جنب

  • لبناء تخطيط متجاوب يتكدس على الأجهزة المحمولة 🚫 لا تستخدم تخطيط العمودين عندما:

  • يهيمن عمود واحد على الصفحة — استخدم التخطيط غير المتماثل بدلًا من ذلك

  • المحتوى لا يستفيد من العرض جنبًا إلى جنب

Accessibility ​

  • تأكد من أن كلا العمودين مرئيان وقادران على الاستخدام على شاشات ضيقة
  • استخدم معالم دلالية (مثل <section>) لتغليف محتوى الأعمدة
  • حافظ على مساحة وتباين كافيين بين الأعمدة

Usage ​

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

Examples ​

Parts ​

PartDescription
.instui-dividerقاطع بصري اختياري بين الأعمدة.
.instui-leftمنطقة محتوى العمود الأيسر.
.instui-rightمنطقة محتوى العمود الأيمن.

States ​

StateDescription
:optional—

Conditions ​

TypeQueryDescription
media(max-width: 768px)—

Tokens consumed ​

TokenTypeValue
--instui-color-border——
--instui-space-large——
--instui-space-medium——