CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol
Araçlara Dön

CSS Grid Oluşturucu

Görsel olarak CSS Grid yerleşimleri oluşturun ve kodlarını anında alın.

Grid Ayarları

Kılavuz çizgilerini ayarlayın

Sütunlar

Satırlar

Alan oluşturmak için hücreler üzerinde sürükleyin. Alanı taşımak için üzerine tıklayıp sürükleyin. Boyutunu değiştirmek için sağ alt köşedeki tutamacı kullanın.

CSS
HTML

CSS Grid Oluşturucu nasıl kullanılır?

CSS Grid, iki boyutlu sayfa yerleşimleri kurmanın en esnek yoludur; ancak grid-template ve grid-area kurallarını elle yazmak deneme yanılma gerektirir. Bu araçla yerleşimi çizersiniz, kullanıma hazır CSS ve HTML kodunu alırsınız.

  1. Sütun ve satır sayısını ve piksel cinsinden boşluğu (gap) ayarlayın.
  2. Bir alan oluşturmak için hücreler üzerinde tıklayıp sürükleyin. İsterseniz alana ad verin.
  3. Alanları sürükleyerek taşıyın, köşe tutamacıyla yeniden boyutlandırın.
  4. Oluşturulan CSS ve HTML kodunu projenize kopyalayın.

Sık sorulan sorular

CSS Grid nedir?
CSS Grid Layout, öğeleri aynı anda satır ve sütunlara yerleştirmeyi sağlayan bir CSS modülüdür. Izgarayı kapsayıcıda tanımlar, alt öğeleri grid-column ve grid-row ile konumlandırırsınız.
CSS Grid tüm tarayıcılarda çalışır mı?
Evet. Chrome, Edge, Firefox ve Safari'nin masaüstü ve mobildeki güncel sürümlerinin tamamı CSS Grid'i destekler.
fr birimi ne anlama gelir?
fr, ızgara kapsayıcısındaki boş alanın bir payıdır. repeat(3, 1fr) kullanılabilir genişliği eşit paylaşan üç sütun oluşturur.
Grid mi Flexbox mı kullanmalıyım?
Sayfa iskeleti veya kart ızgarası gibi iki boyutlu yerleşimlerde Grid, menü veya buton sırası gibi tek boyutlu hizalamalarda Flexbox kullanın. İkisi birlikte çok iyi çalışır.