CSS Grid Jeneratörü

CSS Grid Jeneratörü Nedir ve Ne İşe Yarar?

CSS Grid Jeneratörü, sütun ve satır sayılarını belirleyerek, bunların boyutlarını tanımlayarak ve aralarındaki boşlukları ayarlayarak görsel olarak bir CSS grid düzeni tasarlamanıza olanak tanıyan kullanışlı bir araçtır. Tasarım alanındaki grid üzerinde sürükleme işlemleri yaparak öğeleri düzenin içerisine kolayca yerleştirebilirsiniz. Araç, tasarladığınız bu grid yapısına uygun olan CSS ve HTML kodlarını otomatik olarak üretir; böylece bu kodları doğrudan kopyalayıp kendi projelerinize yapıştırabilirsiniz.

Bu araç özellikle şu durumlarda büyük kolaylık sağlar:

• Bir CSS grid düzenini hızlıca prototiplemek isteyenler,
• Manuel olarak kod yazmak zorunda kalmadan bir grid düzeni için CSS ve HTML kodları üretmeye ihtiyaç duyanlar,
• Farklı sütun ve satır boyutlarının bir grid düzenini nasıl etkilediğini görsel olarak görmek isteyenler,
• Yan menü, üst bilgi ve alt bilgi, galeri veya kontrol paneli yapısına sahip bir düzen oluşturmak isteyenler.

Giriş Parametreleri ve Sınırlar

CSS Grid Jeneratörü üzerinde tasarımınızı şekillendirirken kullanabileceğiniz giriş parametreleri ve bunların sınırları şu şekildedir:

• Sütunlar: 1 ile 12 arasında bir değer alabilir.
• Satırlar (Rows): 1 ile 12 arasında bir değer alabilir.
• Sütun boşluğu: 0 ile 48px arasında bir değer olarak belirlenebilir.
• Satır boşluğu (Row gap): 0 ile 48px arasında bir değer olarak belirlenebilir.
• Sütun boyutları: 1fr, 200px, auto, min-content veya minmax(120px, 1fr) gibi geçerli herhangi bir CSS grid değeri yazılabilir.
• Satır boyutları: Tıpkı sütunlarda olduğu gibi 1fr, 200px, auto, min-content veya minmax(120px, 1fr) gibi geçerli tüm CSS grid değerlerini destekler.
• Öğe yerleştirme (Item placement): Hücrelerin üzerinde basılı tutup sürükleyerek dikdörtgen bir alan işaretlemek suretiyle gerçekleştirilir.

Çalışma Kuralları ve Davranış Detayları

Grid üzerinde çalışırken araç belirli kurallara ve otomatik davranışlara göre çıktı üretir:

• Öğe Oluşturma: Hücrelerin üzerinde sürükleme yapıp fareyi bıraktığınızda, seçilen sütun ve satırları kaplayan yerleştirilmiş bir alt eleman (child item) oluşturulur. Çizilen her bir öğe, CSS çıktısında kendi grid-column ve grid-row kuralına sahip olurken, HTML çıktısında da buna uygun bir div elemanı kazanır.
• Üst Üste Binme: Öğeler grid üzerinde birbiriyle çakışabilir veya üst üste gelebilir. Bu durumda, kronolojik olarak daha sonra çizilen öğe her zaman üstte yer alır.
• Öğe Silme ve Temizleme: Bir öğeyi kaldırmak için üzerindeki "×" işaretine tıklamanız yeterlidir. Ayrıca "Öğeleri temizle" seçeneği kullanıldığında tüm öğeler silinir; bu işlem boş bir HTML kapsayıcısı ve 0 öğe sayısı ile sonuçlanır. "Öğe ekle" seçeneği ise doğrudan yeni bir HTML öğesi üretir.
• Boyutlandırma ve Hatalı Girişler: Her bir izleğin (sütun veya satır) kendi boyut kutusu bulunur ve buralara istenen grid değerleri yazılabilir. Eğer bir boyut kutusuna not-a-grid-track gibi geçersiz bir değer girilirse, ilgili girdi alanı geçersiz olarak işaretlenir ancak CSS çıktısı üretilirken son geçerli değer korunur ve o değer kullanılmaya devam edilir.
• Kod Optimizasyonu: Aynı boyuta sahip olan yan yana izlekler, üretilen CSS kodunun daha sade ve kısa olması için otomatik olarak repeat() fonksiyonu altında birleştirilir. Benzer şekilde, sütun boşluğu ve satır boşluğu değerleri birbirinden bağımsız olarak ayarlansa da, bu iki değer birbiriyle eşleştiğinde CSS çıktısında tek bir gap özelliği altında birleştirilerek sadeleştirilir.
• Kapasite Sınırı: Araç, tasarımınızda en fazla 16 adet öğe barındırmanızı destekler.

Hazır Şablonlar (Ön Ayarlar)

Sıfırdan tasarım yapmak yerine, yaygın olarak kullanılan düzen yapılarını hızlıca oluşturabilmeniz için araç içerisinde çeşitli ön ayarlar (presets) sunulmaktadır:

• Yan Menü: Sol veya sağ tarafta bir menü alanı barındıran klasik web düzeni.
• Üst bilgi ve alt bilgi: Sayfanın üstünde ve altında sabit alanlar içeren standart sayfa yapısı.
• Galeri: Görsel içerikler için ideal olan bu ön ayar seçildiğinde, otomatik olarak 3 sütun, 2 satır ve 3 öğeden oluşan bir grid yapısı oluşturulur.
• Kontrol Paneli: Veri ve yönetim panelleri için uygun, çoklu bölmelerden oluşan yerleşim yapısı.

Çıktı Formatları ve Kullanımı

Tasarımınızı tamamladığınızda, CSS Grid Jeneratörü size iki temel çıktı sunar:

1. CSS: Grid kapsayıcısı (container) ve yerleştirilen her bir öğe için özel olarak üretilmiş CSS kodları.
2. HTML: Grid kapsayıcısını ve bu kapsayıcının içinde yer alan her bir yerleştirilmiş öğe için oluşturulmuş div elemanlarını içeren HTML kod yapısı.

Bu kodları kopyalayarak projenizin ilgili dosyalarına doğrudan entegre edebilir ve tarayıcıda görsel olarak tasarladığınız düzenin birebir aynısını elde edebilirsiniz.

Gizlilik ve Veri İşleme

CSS Grid Jeneratörü kullanıcı gizliliğine önem verir. Tasarladığınız ızgara yapısı ve yaptığınız tüm ayarlar doğrudan kendi web tarayıcınızda oluşturulur. Araç üzerinde gerçekleştirdiğiniz hiçbir işlem veya girdiğiniz hiçbir veri uzak sunuculara yüklenmez.

Sıkça Sorulan Sorular (FAQ)

Izgara (grid) üzerine öğeleri nasıl yerleştiririm?

Hücrelerin üzerinde basılı tutup sürükleyerek bir dikdörtgen çizin — bıraktığınızda bu alan, o sütun ve satırları kaplayan yerleştirilmiş bir alt eleman (child) haline gelir. Çizdiğiniz her öğe CSS'te kendi grid-column ve grid-row kuralını ve HTML'de eşleşen bir div alır. Öğeler üst üste gelebilir ve daha sonra çizilen üstte yer alır; kaldırmak için öğe üzerindeki × işaretini kullanın.

Sütunlar ve satırlar farklı boyutlarda olabilir mi?

Evet. Her izleğin (track) kendi boyut kutusu vardır ve oraya herhangi bir grid değeri yazabilirsiniz — 1fr, 200px, auto, min-content veya minmax(120px, 1fr). Aynı boyutu paylaşan izlekler, çıktının kısa kalması için repeat() içinde birleştirilir. Sütun boşluğu ve satır boşluğu ayrı ayrı ayarlanır ve eşleştiklerinde tek bir gap değerine indirgenir.

Oluşturulan kodla ne yapmalıyım?

CSS ve HTML kodlarını yan yana kopyalayın. HTML size her öğe için bir div içeren kapsayıcıyı verir, CSS ise ızgarayı tanımlar ve her öğeyi konumlandırır. Her ikisini de projenize yapıştırdığınızda burada çizdiğiniz düzenin aynısını elde edersiniz.