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

ذات صلة ​