CSS Grid Oluşturucu

Oluşturulan kapsayıcı

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

• repeat(3, minmax(0, 1fr)): mevcut genişliği eşit paylaşan üç sütun. 1fr, kalan alanın bir parçasıdır; minmax(0, 1fr) sütunların içerik boyutunun altına inmesine izin verir.
• gap: her iz arasındaki boşluk.
• Medya sorgusu repeat(auto-fit, minmax(220px, 1fr)) moduna geçer; yani her biri en az 220px genişliğinde, sığabilecek kadar sütun oluşturulur. Kırılma noktası, sütun sayısının minimum genişlikle çarpımıdır (120px tabanıyla), böylece küçük ekranlarda ızgara sıkışmak yerine yeni satırlara geçer.

fr birimi

fr, “kalan alanın bir parçası” anlamına gelir: sabit boyutlu izler çıkarıldıktan sonra kalan alan, toplam fr birimi sayısına bölünür.

grid-template-columns: 200px 1fr 2fr;

1000px’lik bir kapsayıcıda ilk sütun 200px alır, kalan 800px 1:2 oranında bölünür, yani 267px ve 533px.

auto-fill ile auto-fit

• auto-fill: yeterli öğe olmadığında boş doldurma izleri oluşturur.
• auto-fit: boş izleri sıfıra daraltır, böylece kalan öğeler satırı doldurmak için esner.

Duyarlı alternatif, kart ızgaralarının istediği auto-fit yöntemini kullanır: satır her zaman dolu görünür.

Farklı genişlikte sütunlar

Oluşturucu eşit sütunlar üretir. Boyutları karıştırmak için çıktıyı düzenleyin: grid-template-columns: 200px 1fr 2fr; sabit bir kenar çubuğu ve 1:2 oranında iki esnek sütun verir. Adlandırılmış alanlar (grid-template-areas) veya açık yerleştirme (grid-column: 1 / 3) için bu kuralları oluşturulan kapsayıcının üzerine elle ekleyin.

Grid ve Flexbox

• Grid: izlerle açık 2B düzen. Düzenin satır ve sütun yapısı olduğunda iyidir (sayfa iskeleti, galeri, panel).
• Flexbox: tek bir eksen boyunca 1B hizalama. Öğeler doğal akış içindeyken iyidir (gezinme çubuğu, buton satırı).

Gerçek düzenler genellikle ikisini birleştirir: sayfa iskeleti için Grid, bileşenlerin içinde Flexbox.

Sık yapılan hatalar

• Alt öğelerde min-width: 0 unutmak: ızgara öğeleri varsayılan olarak içeriklerinin minimum genişliğini kullanır ve bu, fr sütunlarının en uzun kelimenin altına inmesini engeller. Alt öğelere min-width: 0 vererek daralmalarını sağlayın.
• display: grid olmadan iç içe geçmek: bir ızgara alt öğesi, siz bildirmediğiniz sürece kendisi bir ızgara değildir.