Grid

Ne zaman kullanılır

Grid, çocukları eşit genişlikte sütunlara yerleştirmek içindir: sayfa bölgeleri, kart ızgaraları, pano bileşenleri. Sütun sayısı ekran genişliğine göre değişebilir.

Ne zaman kullanılmaz

• Tablo verisi için: Satır ve sütun başlığı olan veri için tablo kullanın. Grid yalnızca yerleşim yapar, tablo anlamı taşımaz.
• Tek yönlü akış için: Dikeyde Stack, yatayda Inline kullanın.
• Eşit olmayan sütun genişlikleri için: Grid yalnızca eşit sütun üretir; farklı genişlik için span ile hücreleri yayın.
• Kutu görünümü için: Dolgu, yüzey ya da kenarlık gerekiyorsa her hücreyi Box ile sarın.

Anatomi

Grid iki parçadan oluşur:

1. Izgara: display: grid kapsayıcı. columns ve gap bu öğeye uygulanır.
2. Hücre: Grid.Item (data-part="item"). span ile kaç sütun kaplayacağı belirlenir. Doğrudan çocuk olarak başka öğe de konabilir; bir sütun kaplar.

Davranış

• Grid durağandır: üzerine gelince, tıklayınca ya da odaklanınca değişmez ve sekme sırasına girmez.
• Varsayılanlar: columns 1, gap lg.
• Eşikler: base 1024 px altı, md 1024 px ve üzeri (Tailwind lg:), lg 1440 px ve üzeri. Değer verilmeyen eşik, bir küçüğündeki değeri korur.
• Çocuklar DOM sırasıyla soldan sağa, satır satır yerleşir; sırayı değiştiren bir prop yoktur.

Yönergeler

Dar ekranda tek sütunla başlayın

base değerini küçük tutup md ve lg ile sütun ekleyin; dar ekranda içerik okunabilir kalır.

Birinci öğe

İkinci öğe

Yapın`base` 1, `md` 2: genişledikçe sütun eklenir.

Birinci öğe

İkinci öğe

Üçüncü öğe

YapmayınÜç sütun her genişlikte: dar ekranda hücreler çok daralır.

Izgarayı veri tablosu yerine kullanmayın

Satır ve sütun başlığı olan veri için tablo kullanın; Grid bu ilişkiyi ekran okuyucuya iletmez.

Kart başlığı

Kart başlığı

YapınKartlar Grid'de; her kart bağımsız bir içerik.

Alan etiketiMetin örneğiAlan etiketiMetin örneği

YapmayınEtiket ve değerler Grid'de: ilişki yalnızca görsel.

İçerik

• Grid kendi metnini taşımaz.
• render={<ul />} verdiğinizde her Grid.Item’a render={<li />} verin.
• Örnek metinleri nötr tutun: “Birinci öğe”, “Kart başlığı”.

İlgili bileşenler

• Stack: Hücrenin içini dikey dizmek için.
• Inline: Hücrenin içini yatay dizmek için.
• Box: Hücreye dolgu, yüzey ve kenarlık vermek için.