CSS Grid Oluşturucu

Nasıl kullanılır?

1. Sütunlar (parça boyutları) ve Satırlar (parça boyutları) alanlarını yazın. İki sütun için 200px 1fr, sabit bir kenar çubuğu ile esnek bir ana alan verir.
2. Sütun aralığı (px) ve Satır aralığı (px) değerlerini belirleyin ve kapsayıcıya bir Sınıf adı verin.
3. Boyanacak alan adı alanına bir ad yazın, Boya seçili kalsın ve o alana ait hücrelere tıklayın. Hücreleri temizlemek için Sil seçin.
4. CSS kutusunu kopyalayın ya da kuralları stil dosyanıza yapıştırmadan önce Önizleme bölümüne bakın.

Parça boyutları ve repeat()

Her parça ızgaradaki bir boyuttur: px ya da yüzde cinsinden bir uzunluk, kalan alanı sayısıyla orantılı paylaşan esnek bir fr boyutu, auto, min-content ya da max-content. minmax(en küçük, en büyük) bir parçaya aralık verir. CSS Grid Layout belirtimi her birinin nasıl boyutlandığını açıklar.

repeat(3, 1fr) aynı parçayı üç kez yazar. repeat(auto-fill, minmax(200px, 1fr)) kutunun genişliğine sığan kadar parça üretir. Bu sayı kutuya bağlı olduğundan auto-fill ya da auto-fit içindeki her parçanın sabit boyutu olmalıdır ve araç bunun üzerine adlı alan çizemez.

grid-template-columns: 200px 1fr;  grid-template-rows: auto 1fr auto;  gap: satır-aralığı sütun-aralığı;

Adlı alanlar

grid-template-areas özelliği ızgaranın her satırı için bir dize alır. Bir dizideki adlar o satırın hücreleridir; nokta işareti hiçbir alana ait olmayan bir hücreyi gösterir. Her ad tek bir dikdörtgeni doldurmalıdır, çünkü tarayıcı bir adı L biçiminde ya da iki ayrı blokta yerleştiremez.

Adları kapsayıcı ızgaraya yerleştirir; her alt öğe ise grid-area ile yerini alır. Araç her ad için bir kural yazar, böylece o sınıfa sahip öğe kendi hücrelerini doldurur.

• Her parça satırı için bir ad satırı kullanın ve her satırda aynı sayıda ad bulunsun.
• Adları sayfanın bir bölümünü anlatacak biçimde seçin, örneğin header, sidebar ya da main; kurallar bu adlarla sınıf olarak yazılır.

Sık sorulan sorular