CSS: two-column ​

div[class~="instui-two-column"] — दो-स्तंभ लेआउट जिसमें बाएँ और दाएँ सामग्री क्षेत्र होते हैं।

✅ Two-Column का उपयोग करें जब:

  • आपके पास लगभग समान महत्व वाले दो सामग्री क्षेत्र हों

  • दो सेट सामग्री की साइड-बाय-साइड तुलना या विरोधाभास करना हो

  • एक उत्तरदायी लेआउट बनाना हो जो मोबाइल पर स्टैक हो जाता है 🚫 Two-Column का उपयोग न करें जब:

  • एक स्तंभ पृष्ठ पर प्रभुत्व रखता हो — इसके बजाय असममित लेआउट का उपयोग करें

  • सामग्री साइड-बाय-साइड प्रस्तुति से लाभान्वित नहीं होती

एक्सेसिबिलिटी ​

  • सुनिश्चित करें कि दोनों स्तंभ संकरनीय और संकीर्ण व्यूपोर्ट्स पर उपयोग योग्य हों
  • कॉलम सामग्री को लपेटने के लिए semantic landmarks का उपयोग करें (उदा., <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——

संबंधित ​