Skip to content

CSS: two-column

div[class~="instui-two-column"] — Trefniant dwy-golofn gyda rhanau cynnwys chwith a dde.

✅ Defnyddiwch Dwy-Golofn pan:

  • Mae gennych ddwy ardal gynnwys o bwysigrwydd tua'r un fath

  • Cymharu neu wrthgyferbynnu dau set o gynnwys ochr yn ochr

  • Adeiladu trefniant ymatebol sy'n stacio ar ddyfeisiau symudol 🚫 Peidiwch â defnyddio Dwy-Golofn pan:

  • Mae un golofn yn dominyddu'r dudalen — defnyddiwch drefniant anghyfartal yn hytrach

  • Nid yw'r cynnwys yn cael manteision o'w gyflwyno ochr yn ochr

Hygyrchedd

  • Sicrhewch fod y ddwy golofn yn amlwg ac yn ddefnyddiol ar olygfeydd cul
  • Defnyddiwch nodweddion semanteg (er enghraifft, <section>) i lapio cynnwys y golofnau
  • Cadwch ddigon o le a chontraste rhwng y golofnau

Defnydd

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

Rhannau

RhanDisgrifiad
.instui-dividerRhannwr gweledol dewisol rhwng y golofnau.
.instui-leftArdal cynnwys y golofn chwith.
.instui-rightArdal cynnwys y golofn dde.

Statwsau

StatwsDisgrifiad
:optional

Amodau

MathYmchwiliadDisgrifiad
media(max-width: 768px)

Tocynnau a ddefnyddiwyd

TokenMathGwerth
--instui-color-border
--instui-space-large
--instui-space-medium

Perthnasol