Yerleşim · Grid

Izgara

On iki sütunlu yerleşim. Küçük ekranda sütunlar alt alta iner.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Sekiz ve dört Canlı örnek

Ana içerik · 8 sütun

Yan bölge · 4 sütun

HTML kodunu göster

<div class="trds-izgara">
  <div class="trds-sutun trds-sutun--8"><div class="trds-izgara-ornek">Ana içerik · 8 sütun</div></div>
  <div class="trds-sutun trds-sutun--4"><div class="trds-izgara-ornek">Yan bölge · 4 sütun</div></div>
</div>
<div class="trds-izgara">
  <div class="trds-sutun trds-sutun--4"><div class="trds-izgara-ornek">4</div></div>
  <div class="trds-sutun trds-sutun--4"><div class="trds-izgara-ornek">4</div></div>
  <div class="trds-sutun trds-sutun--4"><div class="trds-izgara-ornek">4</div></div>
</div>

Ne zaman kullanılır

İçerik ve yan menü gibi iki bölgeli sayfalarda kullanın.
Form alanlarını yan yana dizmek için kullanmayın. Alanlar alt alta durur.
Okuma sütunu 8 sütunu geçmez. Uzun satır okumayı yavaşlatır.

Erişilebilirlik

Görsel sıra ile DOM sırası aynıdır. Sütunlar CSS ile yer değiştirmez.
Küçük ekranda içerik hiçbir zaman yatay kaymaz.

Karşılanan WCAG 2.2 ölçütleri 1.3.2 1.4.10

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: IE, DE.