CSS Grid Oluşturucu — Izgara Düzenleri için Profesyonel Araç
Karmaşık ve duyarlı düzenler oluşturmak için sezgisel görsel editörlü ücretsiz CSS Grid oluşturucu. Grid-template-columns, grid-template-rows, gap ve hizalamayı canlı önizleme ve modern web tasarımı için otomatik CSS ve HTML kodu oluşturma ile yapılandırın.
Modern Web Tasarımında CSS Grid Layout
Çevrimiçi Grid Layout oluşturucu, satırlar ve sütunlarla iki boyutlu düzenler oluşturmak için tam görsel kontrol sağlar. CSS Grid, geleneksel düzen yöntemlerinin birçok sorununu çözer ve float, positioning veya flexbox hilelerine gerek kalmadan karmaşık duyarlı düzenler oluşturmanıza olanak tanır. Oluşturucu, tüm gerekli grid kapsayıcı özellikleriyle optimize edilmiş CSS kodu otomatik olarak üretir ve canlı önizleme sonuçları gerçek zamanlı gösterir.
Grid template columns ve rows ayarları, çeşitli birimler aracılığıyla sütun ve satır boyutlarını tanımlamada esneklik sağlar. Kesirli birimler (fr) mevcut alanı orantılı olarak dağıtır, px sabit boyutlar belirler, auto içeriğe uyum sağlar ve minmax() media query olmadan duyarlı sütunlar oluşturur. Görsel Grid editörü, ideal düzeni bulmak için farklı kombinasyonlarla deneme yapmayı basitleştirir.
CSS Grid ile Duyarlı Düzenler Oluşturma
Uyarlanabilir ızgaralar için auto-fit ve auto-fill, media query kullanmadan ekran boyutuna göre otomatik olarak yeniden yapılanan ızgara düzenleri oluşturmanıza olanak tanır. repeat(auto-fit, minmax(250px, 1fr)) sözdizimi, daha küçük ekranlarda otomatik olarak yeni satıra geçen minimum 250px genişliğinde sütunlar oluşturur. Bu özellikle kart ızgaraları, ürün galerileri ve portföy düzenleri için kullanışlıdır.
Karmaşık duyarlı davranışlar için media query, masaüstü, tablet ve mobilde kökten farklı düzenler oluşturmak için Grid ile birleşir. Masaüstünde kenar çubuğuyla 3 sütunlu düzen kullanabilir, tablette 2 sütuna geçebilir ve mobilde yeniden sıralanmış grid alanlarıyla tek sütuna geçebilirsiniz. Grid oluşturucu, farklı kırılma noktaları için kolayca uyarlanabilen temel düzeni gösterir.
Gap ve Elemanlar Arası Boşluk
Column-gap ve row-gap özellikleri, margin hileleri ve nth-child seçicileri olmadan ızgara elemanları arasındaki boşluğu ayarlar. Gap, fr birimlerinin hesaplanmasında dikkate alınır ve hassas alan dağılımı sağlar. Ayrı column-gap ve row-gap, yatay ve dikey boşluk üzerinde kontrol sağlar; bu özellikle farklı yönlerde farklı boşluklar gerektiren kart düzenleri için kullanışlıdır.
Grid'de Eleman Hizalama
Kapsayıcı için justify-items ve align-items, tüm ızgara elemanlarının sırasıyla yatay ve dikey hizalamasını kontrol eder. Stretch değeri elemanları grid hücresinin tam genişliğine/yüksekliğine uzatır, start/end başlangıça/sona hizalar ve center elemanları ortalar. Place-items her iki yön için aynı anda kısaltma özelliğidir.
Bireysel elemanlar için justify-self ve align-self, belirli elemanlar için hizalamayı geçersiz kılmaya olanak tanır. Bu, çoğu eleman bir hizalamayı paylaşırken birkaçının bireysel konumlandırmaya ihtiyaç duyduğu durumlarda kullanışlıdır. Grid oluşturucu, bu özelliklerin düzeni canlı önizlemede nasıl etkilediğini gösterir.
Hazır Grid Düzeni Ön Ayarları
Popüler Grid düzenleri kütüphanesi, yaygın web tasarım görevleri için kanıtlanmış kalıplar içerir. Başlık, altbilgi, kenar çubuğu ve içerik alanlarıyla Holy Grail Layout basit bir 3x3 ızgarayla oluşturulur. Farklı boyutlu widget'larla gösterge paneli düzenleri, esnek yerleşim için fr birim kombinasyonları kullanır. Öne çıkan içerik ve kenar çubuğuyla dergi düzenleri, asimetrik grid sütunları aracılığıyla uygulanır.
Kart ızgaraları ve galeri düzenleri, CSS Grid'in en popüler kullanım alanıdır. 3-4 sütunlu tek tip kart ızgaraları, ürün listeleri, blog yazıları ve ekip üyeleri için idealdir. Fotoğraf galerileri, temiz görünüm için eşit satır yükseklikli ızgaralar kullanır. Değişken kart yükseklikli masonry tarzı düzenler, grid-auto-rows ve grid-row span aracılığıyla oluşturulur.