CSS Grid Oluştürücu
Canlı önizleme ve kod üretimi ile CSS Grid düzenleri oluşturmak için görsel alan
Grid Kapsayici Özellikleri
Grid Öğe Özellikleri
Düzen Şablonları
Canlı Önizleme
Oluştürülan CSS
Kullanım Örnekleri
2 Sütunlu Düzen
CSS Grid kullanarak içerik ve kenar çubuğu için basit iki sütunlu bir düzen oluştürün.
Kontrol Paneli Izgarasi
Grid alanlari kullanarak farklı boyutlu widget'larla bir kontrol paneli düzeni oluştürün.
Görsel Galerisi
Esit boyutlu hücrelerle duyarli bir görsel galeri izgarasi oluştürün.
Özellikler
Canlı Görsel Önizleme
Grid düzeninizin özellikler ve öğeler ayarlandikca gerçek zamanli güncellenmesini görün
Kullanıma Hazir CSS Kodu
Grid kapsayici ve bireysel öğeler için temiz CSS kodu alin
Düzen Şablonları
2 sütun, kontrol paneli, galeri ve dergi gibi yaygın grid şablonlarıyla baslayin
Grid Öğe Yayılmasi
grid-column ve grid-row ile birden fazla sütun veya satira yayılan öğeler yapılandırın
Nasıl Kullanılır?
Grid Özelliklerini Ayarlayın
Sütun ve satir sayısını, boyutlari (fr, px, auto), gap ve hizalamayi seçin.
Öğeleri Yapılandırın
Öğeler ekleyin ve yayılma için grid-column ve grid-row baslangic/bitis değerlerini ayarlayın.
CSS'i Kopyalayın
Oluştürülan CSS kodunu kopyalayın ve projenizde kullanin.
Sık Sorulan Sorular
CSS Grid Oluşturucu Nedir?
CSS Grid Oluşturucu, sütun, satır, boşluk ve öğe yayılımını ayarlayıp düzenin canlı güncellendiğini gördüğünüz görsel bir alandır. Doğru göründüğünde temiz CSS'i kopyalayıp projenize eklersiniz. Sözdizimi ezberlemeye gerek yok.
Temel Özellikler
Esnek boyutlandırma (fr, px, auto) ile sütun ve satır sayılarını yapılandırın. Konteyner seviyesinde gap, justify-items ve align-items ayarlayın. Bireysel öğeleri seçip yayılma için grid-column/grid-row başlangıç ve bitiş değerlerini belirleyin. Hızlı başlangıç için altı düzen şablonu (2 sütun, 3 sütun, kenar çubuğu, kontrol paneli, galeri, dergi).
Yaygın Kullanım Alanları
Header, kenar çubuğu, ana içerik ve footer içeren sayfa düzenleri. Farklı boyutlu widget kartlarıyla kontrol paneli düzenleri. Eşit hücreli fotoğraf galerileri. Bazı makalelerin birden fazla sütuna yayıldığı dergi tarzı düzenler.
İpuçları
Ekran boyutuna uyum sağlayan akıcı düzenler için fr birimlerini kullanın. gap özelliği her hücreye margin eklemekten daha temizdir. Bir şablonla başlayın, sonra tasarımınıza uyacak şekilde sütun ve satır boyutlarını ayarlayın.
Gizlilik
Tamamen tarayıcınızda çalışır. Grid yapılandırmaları veya veriler bilgisayarınızdan çıkmaz.