MoreOnlineTools
ESC

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

Sütunlar 3
Sütun Boyutu
Satırlar 3
Satir Boyutu
gap (px) 10
justify-items
align-items
Öğe Sayısı 6

Grid Öğe Özellikleri

Öğe Sec
grid-column-start
grid-column-end
grid-row-start
grid-row-end

Düzen Şablonları

Canlı Önizleme

Oluştürülan CSS

Tüm işlemler tarayıcınızda gerçekleşir. Hiçbir veri sunucuya gönderilmez.

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?

1

Grid Özelliklerini Ayarlayın

Sütun ve satir sayısını, boyutlari (fr, px, auto), gap ve hizalamayi seçin.

2

Öğeleri Yapılandırın

Öğeler ekleyin ve yayılma için grid-column ve grid-row baslangic/bitis değerlerini ayarlayın.

3

CSS'i Kopyalayın

Oluştürülan CSS kodunu kopyalayın ve projenizde kullanin.

Sık Sorulan Sorular

Grid'i, hem satırlar hem de sütunlar üzerinde aynı anda kontrol sağlamanız gereken iki boyutlu düzenler için kullanın; üst bilgi/kenar çubuğu/içerik/alt bilgi gibi sayfa düzeyindeki yapılar, kontrol paneli kartları ve fotoğraf galerileri bunlara örnektir. Flexbox'ı ise bir bileşen içindeki tek eksenli hizalama için tercih edin; örneğin bir gezinti çubuğundaki öğeleri ortaya almak veya bir satırdaki düğmeleri dağıtmak gibi durumlarda. Grid ve Flexbox birbirini tamamlar: Grid makro düzeni yönetir, Flexbox her hücre içindeki mikro hizalamayı üstlenir.

fr, "kullanılabilir boş alanın kesri" anlamına gelir. Sabit boyutlu sütunlar (px, auto) kendi alanlarını tükettikten sonra kalan genişlik kesirlere bölünür. grid-template-columns: 1fr 2fr 1fr ifadesi, ortadaki sütunun her iki yan sütunun iki katı kadar alan aldığı üç sütun oluşturur. fr kullanmak, medya sorgusu olmadan farklı ekran genişliklerine uyum sağlayan akışkan grid'ler oluşturmanın tercih edilen yoludur.

Her iz boyutunu bir boşlukla ayırın: grid-template-columns: 200px 1fr 1fr ifadesi 200px genişliğinde sabit bir kenar çubuğu ve iki eşit akışkan sütun oluşturur. Birimleri karıştırabilirsiniz: 1fr auto 1fr ortadaki sütunun içeriği kadar daralmasını sağlar. repeat() kısaltması tekrarı kolaylaştırır: repeat(3, 1fr) ifadesi 1fr 1fr 1fr ile tamamen aynıdır. Bu araç, CSS çıktısında doğru kısaltmayı otomatik olarak üretir.

gap (eski adıyla grid-gap), grid izleri arasına boşluk ekler; grid'in dış kenarlarına değil. Bu, neredeyse her zaman istediğiniz şeydir: kapsayıcı etrafında fazladan dolgu olmaksızın hücreler arasında tutarlı boşluklar. margin ise bireysel grid öğelerinin etrafına boşluk ekler; bu, kenarlarda tutarsızlığa yol açar ve kapsayıcının genel boyutunu büyütür. Boşluklar için gap, tüm düzen etrafında nefes alma alanı için ise grid kapsayıcısında padding kullanın.

Öğe üzerinde grid-column-start ve grid-column-end değerlerini ayarlayın. Örneğin grid-column: 1 / 3 ifadesi, öğenin 1. çizgiden başlayıp 3. çizgide bitmesini, yani 2 sütuna yayılmasını sağlar. span anahtar kelimesini de kullanabilirsiniz: grid-column: span 2. Aynı mantık grid-row ile satırlar için de geçerlidir. Bu araçta bir grid öğesi seçip başlangıç/bitiş değerlerini ayarlayarak doğru CSS'i otomatik olarak oluşturabilirsiniz.

Her ikisi de kapsayıcıya sığan kadar iz oluşturmak için repeat() ile birlikte kullanılır: repeat(auto-fill, minmax(200px, 1fr)). Fark, öğelerin tüm sütunları doldurmadığı durumlarda ortaya çıkar. auto-fill boş sütunları grid'de tutar ve iz yapısını korur. auto-fit ise boş sütunları sıfıra indirgeyerek dolu öğelerin o alanı kullanmak için genişlemesine izin verir. Duyarlı kart grid'lerinin büyük çoğunluğunda auto-fit daha doğal bir davranış sergiler.

grid-template-areas, düzeni görsel bir ASCII haritasıyla tanımlamanıza olanak tanır. Örnek: grid-template-areas: "header header" "sidebar content" "footer footer". Ardından öğeleri grid-area: header, grid-area: sidebar gibi değerlerle ilgili alanlara atarsınız. Bu yaklaşım, karmaşık düzenleri okunabilir kılar ve bir medya sorgusuyla yeniden yapılandırmayı kolaylaştırır; yeni kesme noktası için sadece grid-template-areas'ı yeniden tanımlamanız yeterlidir.

Hayır. Her şey tarayıcınızda çalışır. Grid yapılandırmalarınız hiçbir zaman cihazınızdan çıkmaz.

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.

Güvenlik ve Gizlilik

Verilerinizin güvenliği bizim önceliğimiz

Yerel İşleme

Tüm işlemler tarayıcınızda gerçekleşir

Veri Transferi Yok

Verileriniz sunucularımıza gönderilmez

Veri Depolama Yok

Hiçbir veri depolanmaz veya paylaşılmaz

SSL Şifreleme

Güvenli bağlantı için SSL şifreleme

Sonraki Adım

CSS Flexbox Oluşturucu

Canlı önizleme ile CSS Flexbox layout oluşturun

HTML Tablo Oluşturucu

Görsel HTML tablo oluşturucu

İlişkili Araçlar

SVG Kod Görüntüleyici

SVG dosyanızı analiz edin, kodunu biçimlendirilmiş halde görün ve kopyalayın

Meta Etiket Oluşturucu

SEO için HTML meta etiketleri oluşturun

Open Graph Oluşturucu

Sosyal medya paylaşımları için OG meta etiketleri oluşturun

Border Radius Oluşturucu

Görsel önizleme ile CSS border-radius oluşturun

Kod Fark Kontrolü

İki kod parçacığını yan yana karşılaştırın ve farkları satır satır vurgulayın

XML Biçimlendirici

XML kodunu güzelleştirin ve doğrulayın

MoreOnlineTools'ta Daha Fazlası

Ücretsiz Online Araçlar

Metin, görsel, güvenlik, geliştirici için 109 araç

Tüm Araçlara Göz At →
Geliştirici Kopya Kâğıtları

Regex, Git, HTTP kodları, CSS, Markdown için hızlı referans

Kopya Kâğıtlarına Göz At →
Online Hesap Makineleri

VKİ, kredi, yüzde, bahşiş, yaş ve daha fazla hesap makinesi

Hesap Makinelerine Göz At →
Araç Koleksiyonları

Derlenmiş iş akışları: API geliştirme, görsel boru hattı, güvenlik denetimi ve daha fazlası

Koleksiyonlara Göz At →