Yerleşim Izgaraları¶

Yerleşim Izgaraları içeriği tepkisel (responsive) biçimde sütunlar üzerinde düzenlemeye yardımcı olur. Farklı ekran boyutlarına otomatik olarak uyum sağlarlar.

İki Sütun Düzeni¶

Sol Sütun

İki sütunlu yerleşim ızgarasının sol sütunundaki içerik.

Sağ Sütun

İki sütunlu yerleşim ızgarasının sağ sütunundaki içerik.

Üç Sütun Düzeni¶

1

Birinci Sütun

2

İkinci Sütun

3

Üçüncü Sütun

Dört Sütun Düzeni¶

A

İlk

B

İkinci

C

Üçüncü

D

Dördüncü

Asimetrik Izgara Yapısı¶

2/3 + 1/3 Bölme¶

Ana İçerik (2/3)

Bu sütun mevcut alanın üçte ikisini kaplar. Ana içerik alanları için mükemmeldir.

Kenar Çubuğu (1/3)

Bu sütun alanın üçte birini kaplar.

1/4 + 3/4 Bölme¶

Nav

Navigasyon için dar sütun

İçerik Alanı

Detaylı bilgi için bol yer ile ana içerik görüntüleme için geniş sütun.

Tepkisel (Responsive) Izgara Yapısı¶

Bu ızgara masaüstünde 4 sütun, tablette 2 sütun, mobilde 1 sütun olarak otomatik ayarlanır:

4

Responsive

2

Esnek

1

Uyarlanabilir

0

Dinamik

İç İçe Izgaralar¶

Ana Grid - Sol

İç İçe 1

İç İçe 2

Ana Grid - Sağ

Tam Genişlik İç İçe

Farklı Aralıklı Izgaralar¶

Küçük Aralık (10px)¶

Küçük

Aralık

Grid

Orta Aralık (20px)¶

Orta

Aralık

Grid

Büyük Aralık (30px)¶

Büyük

Aralık

Grid

En İyi Uygulamalar¶

Tepkisel (Responsive) Tasarım: Otomatik tepkisel ızgara yapıları için phantom-grid-auto sınıfını kullanın
Aralık Boyutlandırma: Tutarlı boşluklar için aralık sınıflarını (phantom-grid-gap-sm, phantom-grid-gap-md, phantom-grid-gap-lg) kullanın