CSS Grid Oluşturucu
Kod üreten görsel CSS Grid düzen oluşturucu
Yerleşim ayarları
Hazır yerleşimler
Öğeye özel yerleşim
Özelliklerini düzenlemek için önizlemeden veya listeden bir öğe seçin.
CSS Grid hızlı başvuru
Grid izleri
Esnek izler için fr birimini, sabit izler için px/% birimlerini, içeriğe göre boyutlanan izler için auto kullanın.
repeat() fonksiyonu
repeat(3, 1fr), 1fr 1fr 1fr ifadesinin kısa yazımıdır. Duyarlı gridler için auto-fill veya auto-fit kullanın.
Birden fazla izi kaplayan öğeler
N iz kaplamak için span N, tüm sütunları/satırları kaplamak için 1 / -1 kullanın.
Canlı önizleme
Çizgi etiketleri ilk 200 izi gösterir. CSS'iniz ve yerleşiminiz tam olarak korunur.
Oluşturulan CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
}Ayarları değiştirin veya bir öğe seçin. Önizleme ve CSS birlikte güncellenir.
CSS Grid Oluşturucu hakkında
CSS Grid Oluşturucu, CSS Grid düzenlerini tasarlamak ve oluşturmak için etkileşimli görsel bir araçtır. CSS Grid Layout, sütunları ve satırları aynı anda tanımlamanızı sağlayan, CSS'teki en güçlü iki boyutlu düzen sistemidir. Bu araç, CSS Grid'i öğrenmek, denemek ve üretimde kullanıma hazır kod oluşturmak için uygulamalı bir yaklaşım sunar.
Temel özellikler
- Serbest biçimli girişle grid-template-columns ve grid-template-rows üzerinde tam kontrol
- Eşit boyutlu hatlarla hızlı prototipleme için hızlı sütun ve satır düğmeleri
- Hassas boşluk kontrolü için bağımsız row-gap ve column-gap kaydırıcıları
- justify-items ve align-items hizalama kontrolleri
- Hızlı değer düğmeleriyle öğe bazında grid-column ve grid-row yerleşimi
- Anlamsal düzen bölgelerini görselleştirmek için ızgara öğelerine özel etiketler
- Izgara çizgi numarası göstergeleriyle pastel renkli, numaralı öğeler
- Hazır düzenler: Blog düzeni, Kontrol paneli, Fotoğraf galerisi ve Açılış sayfası
- Tek tıkla kopyalamayla otomatik oluşturulan CSS kodu
- Tam koyu mod desteği
CSS Grid'i anlama
CSS Grid, açık veya örtük hatlara (sütunlar ve satırlar) sahip bir ızgara kapsayıcısı tanımlayarak çalışır. Kapsayıcı içindeki öğeler otomatik olarak hücrelere yerleştirilir; ayrıca grid-column ve grid-row özelliklerini kullanarak birden fazla hattı kaplayacak şekilde açıkça yerleştirebilirsiniz. fr birimi kullanılabilir alanın bir payını temsil ederek duyarlı düzenleri kolaylaştırır. repeat() işlevi yinelenen hat tanımlarını basitleştirir; minmax() ve auto-fill/auto-fit gibi işlevler ise medya sorguları olmadan gerçekten duyarlı ızgaralar oluşturmayı sağlar.
Yaygın CSS Grid düzen kalıpları
CSS Grid; üst bilgi, kenar çubuğu, içerik ve alt bilgi bölgeleri içeren blog tasarımları; gezinme, ana içerik ve bileşen alanları içeren kontrol paneli arayüzleri; duvar örgüsü benzeri bir etki için birden fazla satır ve sütunu kaplayan öğelerden oluşan fotoğraf galerileri; tam genişlikte giriş bölümleri, çok sütunlu özellik ızgaraları ve eylem çağrısı alanları içeren açılış sayfaları gibi sayfa düzeyindeki düzenler için idealdir. Bu kalıpları anında keşfetmek için hazır ayar düğmelerini kullanın.
Grid ve Flexbox karşılaştırması
Flexbox tek boyutlu düzenler (tek satır veya sütun) için tasarlanırken CSS Grid her iki ekseni aynı anda kontrol etmeniz gereken iki boyutlu düzenlerde başarılıdır. Grid sayfa düzenleri ve karmaşık bileşen yerleşimleri için en uygunudur; Flexbox ise tek bir satırdaki öğeler arasında alan dağıtmak için idealdir. Birçok modern tasarım, genel sayfa yapısında Grid ve bileşen düzeyinde hizalamada Flexbox kullanarak ikisini birleştirir.
Bu araç kimler için?
- CSS Grid ile sayfa düzenleri oluşturan web geliştiricileri
- Duyarlı ızgara sistemlerini prototipleyen ön yüz mühendisleri
- Uygulamadan önce ızgara yapılarını görselleştiren UI/UX tasarımcıları
- İki boyutlu CSS düzen tekniklerini öğrenen öğrenciler
- Atölyelerde veya derslerde CSS Grid kavramlarını öğreten eğitimciler
- Web projeleri için hızla CSS Grid kodu oluşturması gereken herkes