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

مرتبط ​