CSS Grid düzeni oluşturma: Sütun, satır ve boşluk ayarları

Sütun, satır ve boşluk değerlerini girip CSS oluşturma kontrolünü çalıştırarak CSS Grid kodu elde edebilirsiniz. Sayısal değerler uygun repeat yapılarına dönüşür, özel metinler korunur ve boşluk bildirimleri koşula bağlı olarak px birimiyle yazılır.

CSS Grid yerleşiminde başlangıç ayarlarını seçme

CSS Grid Generator, sütun, satır ve boşluk ayarlarından CSS Grid yerleşim kodu üretmek için kullanılabilir. Kart, panel veya içerik kutularını düzenlerken sütun sayısını hızlıca belirlemek, satır davranışını seçmek ve kutular arasındaki mesafeyi tanımlamak istediğinizde pratik bir başlangıç sunar. Sütun ve satır alanlarına sayı yazabileceğiniz gibi 200px 1fr ya da 1fr 1fr 1fr gibi özel metinler de girebilirsiniz.

Alanları boş bırakarak başlarsanız varsayılan değerler devreye girer: 3 sütun, auto satırlar, 10 genel boşluk, 0 sütun boşluğu ve 0 satır boşluğu. Bu başlangıç, temel bir üç sütunlu düzen oluşturmayı denemek için uygundur. Daha sonra özel sütun genişlikleri veya ayrı eksen boşlukları ekleyerek oluşan CSS bildiriminin ihtiyacınıza nasıl değiştiğini inceleyebilirsiniz.

Sütun, satır ve boşluk değerlerini ayarlama

1. Sütun, satır, genel boşluk, sütun boşluğu ve satır boşluğu kontrollerini açın. Bir alanı boş bırakırsanız ilgili başlangıç değeri kullanılır; örneğin sütun için 3, satır için auto uygulanır.

2. Sütun alanında 4 gibi yalnızca rakamlardan oluşan bir değer kullanın. Bu değer, sütun bildiriminde dört adet 1fr alanını ifade eden repeat biçimine çevrilir. Belirli genişlikler istiyorsanız 200px 1fr veya 1fr 1fr 1fr gibi özel metin girin; bu metin korunur ve başka bir kalıba dönüştürülmez.

3. Satır alanına rakamsal bir değer yazdığınızda, değer auto değilse satır bildirimi repeat biçiminde ve auto yüksekliğiyle oluşturulur. auto veya rakam dışı bir satır metni kullanırsanız yazdığınız ifade korunur. Sütun ve satır girişleri yorumlanmadan önce metne çevrildiği için sütun alanına sayı olarak verilen 3 de kabul edilir.

4. Genel boşluk alanına sıfırdan farklı bir değer girin; sonuçta genel gap bildirimi px birimiyle yazılır. Sütun boşluğu ve satır boşluğu değerleri de ayrı bildirimler olarak px birimiyle eklenebilir. Sıfır veya etkisiz kabul edilen bir değer, karşılık gelen bildirimin yazılmamasına neden olur.

5. CSS oluşturma kontrolünü çalıştırın ve oluşan kodu inceleyin. Özel sütun ya da satır metinleri kullanıyorsanız bu ifadelerin hedeflediğiniz CSS Grid yerleşimiyle uyumlu olduğunu ayrıca kontrol ederek kodu stil dosyanızdaki uygun bölüme taşıyın.

CSS çıktısındaki bildirimleri değerlendirme

Üretilen sonuçta display: grid bildirimiyle birlikte sütun ve satır şablonlarını belirleyen ayrı bildirimler bulunur. Sütun alanına rakam yazılmışsa repeat(..., 1fr) yapısı, auto dışındaki rakamsal satır değerinde ise repeat(..., auto) yapısı beklenir. Bu dönüşümler, sayıların bir düzen sayısı olarak ele alındığını gösterir.

Özel metin verdiğinizde çıktı, metni koruyarak oluşturulur; bu nedenle aracın bu ifadenin istediğiniz yerleşimi sağlayıp sağlamadığını ayrıca doğruladığını varsaymayın. Genel boşluk ile eksenlere özel boşlukları birlikte doldurursanız CSS içinde birden fazla boşluk bildirimi görülebilir. Sıfır değer için bildirimin görünmemesi, sıfırın px ile yazıldığı anlamına gelmez; ilgili koşul sağlanmadığında o satır çıktıya eklenmez. Oluşan kodu projenizde kullanmadan önce sütun, satır ve mesafe değerlerini hedef görünümle karşılaştırın.

Uygulamalı örnek

Kartlardan oluşan bir bölüm hazırlayan geliştirici, üç esnek sütun ve aralarında 16 piksellik genel boşluk elde etmek için bu değerleri girer.

Sütun alanına 3, satır alanına auto ve genel boşluk alanına 16 yazın; ardından CSS oluşturma kontrolünü çalıştırın.

Sonuçta display: grid, ayrı sütun ve satır şablonu bildirimleri, üç sütun için repeat biçimli bir sütun bildirimi ve 16px genel boşluk bildirimi görülür.

Sınırlamalar

• Rakam dışı sütun ve satır metinleri korunur; bu ifadelerin hedeflediğiniz CSS Grid yerleşimine uygunluğunu ayrıca denetlemeniz gerekir.

Sık yapılan hatalar

• Boşluk alanına rem veya em birimi eklemek beklediğiniz sonucu vermeyebilir; sayısal boşluklar çıktıda px olarak yazılır. Farklı birim kullanmanız gerekiyorsa oluşturulan CSS içindeki ilgili bildirimi sonradan düzenleyin ve sıfır değerlerde bildirimin eklenmediğini göz önünde bulundurun.

Sık sorulan sorular

Sütun sayısını sayı olarak girebilir miyim?

Sütun alanına 3 yazmanız veya sayı olarak 3 sağlamanız durumunda giriş kabul edilir ve sütun bildirimi repeat biçimine dönüştürülür. Bu yapı, üç adet 1fr alanını ifade eder.

Özel sütun genişlikleri kullanabilir miyim?

200px 1fr ya da 1fr 1fr 1fr gibi rakam dışı özel sütun metinleri kullanıldığında ifade korunur. Yalnızca rakamlardan oluşan sütun değerleri repeat gösterimine çevrilir.

Boşluk değerleri CSS çıktısında nasıl yazılır?

Genel, sütun veya satır boşluğu alanına sıfırdan farklı bir değer girildiğinde ilgili CSS bildirimi px birimiyle yazılır. Sıfır ya da etkisiz kabul edilen değerlerde karşılık gelen bildirim oluşturulmaz.