CSS: two-column

div[class~="instui-two-column"] — Mise en page à deux colonnes avec zones de contenu gauche et droite.

✅ Utiliser Two-Column lorsque :

• Vous avez deux zones de contenu d'importance à peu près égale

• Comparer ou contraster deux ensembles de contenu côte à côte

• Créer une mise en page réactive qui s'empile sur mobile 🚫 Ne pas utiliser Two-Column lorsque :

• Une colonne domine la page — utiliser plutôt une mise en page asymétrique

• Le contenu ne bénéficie pas d'une présentation côte à côte

Accessibilité

• Ensure both columns are perceivable and usable on narrow viewports
• Use semantic landmarks (e.g., <section>) to wrap column content
• Maintain sufficient space and contrast between columns

Utilisation

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

Exemples

Parties

Partie	Description
.instui-divider	Séparateur visuel optionnel entre les colonnes.
.instui-left	Zone de contenu de la colonne de gauche.
.instui-right	Zone de contenu de la colonne de droite.

États

État	Description
:optional	—

Conditions

Type	Requête	Description
media	(max-width: 768px)	—

Tokens consommés

Token	Type	Valeur
--instui-color-border	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Connexe

• page-layout