CSS: two-column ​

div[class~="instui-two-column"] — פריסת שתי עמודות עם אזורי תוכן שמאלי וימני.

✅ השתמש ב־Two-Column כאשר:

  • יש לך שני אזורי תוכן בעלי חשיבות משוערת שווה

  • השוואה או ניגוד בין שני מערכי תוכן זה לצד זה

  • בניית פריסה רספונסיבית שמצטטת לערימה במובייל 🚫 אל תשתמש ב־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——

קשור ​