CSS: two-column

div[class~="instui-two-column"] — Διάταξη δύο στηλών με περιοχές περιεχομένου αριστερά και δεξιά.

✅ Χρησιμοποιήστε Two-Column όταν:

• Έχετε δύο περιοχές περιεχομένου περίπου ίσης σημασίας

• Συγκρίνοντας ή αντιπαραβάλλοντας δύο σύνολα περιεχομένου δίπλα-δίπλα

• Δημιουργείτε μια ανταποκρινόμενη διάταξη που στοιβάζεται σε κινητές συσκευές 🚫 Μην χρησιμοποιείτε το Two-Column όταν:

• Μια στήλη κυριαρχεί στη σελίδα — χρησιμοποιήστε αντ' αυτού ασύμμετρη διάταξη

• Το περιεχόμενο δεν ωφελείται από παρουσίαση δίπλα-δίπλα

Προσβασιμότητα

• Διασφαλίστε ότι και οι δύο στήλες είναι αντιληπτές και χρησιμοποιήσιμες σε στενά παράθυρα προβολής
• Χρησιμοποιήστε σημασιολογικά σημεία αναφοράς (π.χ., <section>) για να περικλείσετε το περιεχόμενο των στηλών
• Διατηρήστε επαρκή χώρο και αντίθεση ανάμεσα στις στήλες

Χρήση

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

Μέρη

Μέρος	Περιγραφή
.instui-divider	Προαιρετικός οπτικός διαχωριστής μεταξύ των στηλών.
.instui-left	Περιοχή περιεχομένου αριστερής στήλης.
.instui-right	Περιοχή περιεχομένου δεξιάς στήλης.

Καταστάσεις

Κατάσταση	Περιγραφή
:optional	—

Συνθήκες

Τύπος	Ερώτημα	Περιγραφή
media	(max-width: 768px)	—

Καταναλωμένα tokens

Token	Τύπος	Τιμή
--instui-color-border	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Σχετιζόμενα

• page-layout