CSS: two-column

div[class~="instui-two-column"] — Sol ve sağ içerik bölgelerine sahip iki sütunlu düzen.

✅ Two-Column'i şu durumlarda kullanın:

• Önemi yaklaşık olarak eşit iki içerik alanınız var

• İki içerik setini yan yana karşılaştırmak veya zıtlaştırmak istiyorsunuz

• Mobilde üst üste yığılacak duyarlı bir düzen oluşturuyorsunuz 🚫 Two-Column'i şu durumlarda kullanmayın:

• Bir sütun sayfada baskınsa — bunun yerine asimetrik düzen kullanın

• İçerik yan yana sunumdan fayda sağlamıyorsa

Erişilebilirlik

• Her iki sütunun dar görüntüleme alanlarında algılanabilir ve kullanılabilir olmasını sağlayın
• Sütun içeriğini sarmak için anlamsal işaretleyiciler kullanın (ör. <section>)
• Sütunlar arasında yeterli boşluk ve kontrastı koruyun

Kullanım

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

Bölümler

Parça	Açıklama
.instui-divider	Sütunlar arasındaki isteğe bağlı görsel ayırıcı.
.instui-left	Sol sütun içerik alanı.
.instui-right	Sağ sütun içerik alanı.

Durumlar

Durum	Açıklama
:optional	—

Koşullar

Tür	Sorgu	Açıklama
media	(max-width: 768px)	—

Tüketilen tokenler

Token	Tür	Değer
--instui-color-border	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

İlgili

• page-layout