CSS: two-column

div[class~="instui-two-column"] — Kaksipalstainen asettelu, jossa vasen ja oikea sisältöalue.

✅ Käytä Two-Columnia, kun:

• Sinulla on kaksi sisältöaluetta, jotka ovat suunnilleen yhtä tärkeitä

• Kun vertailet tai vastaat kaksi sisältökokonaisuutta vierekkäin

• Rakennat responsiivista asettelua, joka pinoutuu mobiilissa 🚫 Älä käytä Two-Columnia, kun:

• Yksi palsta hallitsee sivua — käytä sen sijaan epäsymmetristä asettelua

• Sisältö ei hyödy vierekkäisestä esittelystä

Saavutettavuus

• Varmista, että molemmat palstat ovat havaittavissa ja käytettävissä kapeilla näkymillä
• Käytä semanttisia maamerkkejä (esim. <section>) palstasisällön kääreinä
• Säilytä riittävä tila ja kontrasti palstojen välillä

Käyttö

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

Esimerkit

Osat

Osa	Kuvaus
.instui-divider	Valinnainen visuaalinen erotin palstojen välillä.
.instui-left	Vasemman palstan sisältöalue.
.instui-right	Oikean palstan sisältöalue.

Tilat

Tila	Kuvaus
:optional	—

Ehdot

Tyyppi	Kysely	Kuvaus
media	(max-width: 768px)	—

Käytetyt tokenit

Token	Tyyppi	Arvo
--instui-color-border	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Liittyvät

• page-layout