Grid

Durumlar

Grid ve Grid.Item etkileşimli değildir. Varsayılan olarak <div> üretirler; fare, klavye ya da dokunma ile durumları değişmez.

Durum	Destek	Görsel değişiklik
Varsayılan	Var	Eşit sütunlu ızgara; sütun sayısı columns, boşluk gap ile
Üzerine gelme	Yok	Yok; öğe işaretçiye tepki vermez
Basılı	Yok	Yok; öğe tıklanamaz
Odak	Yok	Yok; öğe odak almaz ve odak halkası çizmez
Devre dışı	Yok	Yok; devre dışı olacak bir eylemi yok
Seçili	Yok	Yok; seçilebilir değil

Ölçüler

Grid’in kendi sabit ölçüsü yoktur; sütunlar kapsayıcının genişliğini eşit paylaşır.

Özellik	Değer	Token
Sütun sayısı (columns)	1 ile 12 arası; varsayılan 1	-
Eşik: base	1024 px altı	-
Eşik: md	1024 px ve üzeri (Tailwind lg:)	-
Eşik: lg	1440 px ve üzeri (min-[90rem]:)	-
Sütun ve satır boşluğu (gap)	none 0, xxs 2, xs 4, sm 6, md 8, lg 12, xl 16, 2xl 20, 3xl 24, 4xl 32, 5xl 40, 6xl 48, 7xl 56 px; varsayılan lg	space-{ad}
Hücre genişliği (span)	1 ile 12 sütun ya da full (tüm satır)	-

Token’lar

Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.

Token	Açık mod	Koyu mod
--bigbang-space-xs	4px4px4px	4px4px4px
--bigbang-space-sm	6px6px6px	6px6px6px
--bigbang-space-md	8px8px8px	8px8px8px
--bigbang-space-lg	12px12px12px	12px12px12px
--bigbang-space-xl	16px16px16px	16px16px16px
--bigbang-space-2xl	20px20px20px	20px20px20px
--bigbang-space-3xl	24px24px24px	24px24px24px
--bigbang-space-4xl	32px32px32px	32px32px32px

Hareket ve etkileşim

Etkileşim	Hareket	Azaltılmış hareket
Üzerine gelme, basma, odak	Yok: Grid etkileşimli değildir	Azaltılacak bir şey yok
Giriş ve çıkış	Yok: Grid süre ya da easing token’ı kullanmaz; içerik hemen gelir ve gider	Azaltılacak bir şey yok
Yerleşim değişimi	Yok: ekran genişliği değişince yerleşim geçişsiz değişir	Azaltılacak bir şey yok

Grid bir hareket hazır ayarı (preset) kullanmaz; çocuklarının hareketi kendi bileşenlerine aittir. Ayrıntılar için Hareket sayfasına bakın.