CSS Grid Generator

Build CSS Grid layouts visually.

grid-template-columns

grid-template-rows

column-gap

row-gap

justify-items

align-items

justify-content

Öğe sayısı: 6

Önizleme

Oluşturulan CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
}

Bu araç hakkında

CSS Grid Layout Generator, grid-template-columns, grid-template-rows, boşluk özellikleri ve hizalama ayarlarını değiştirerek iki boyutlu grid düzenlerini görsel olarak tasarlamanıza olanak tanır. Canlı önizleme, kod yazmadan önce grid'in nasıl görüneceğini gösterir.

CSS Grid, CSS'deki en güçlü düzen sistemidir; iki boyutlu düzenler (aynı anda satırlar VE sütunlar) için tasarlanmıştır. Tek boyutlu düzenler için Flexbox'ı tamamlar.

Nasıl kullanılır

Sütun yapısını tanımlamak için grid-template-columns'u ayarlayın. Yaygın desenler için ön ayar düğmelerini kullanın.
İsteğe bağlı olarak grid-template-rows'u ayarlayın (çoğu düzen için auto olarak bırakın).
Boşluk için column-gap ve row-gap'i ayarlayın.
Hücrelerdeki öğe yerleşimini kontrol etmek için justify-items ve align-items'ı kullanın.
Grid'in nasıl tepki verdiğini görmek için kaydırıcıyla öğe sayısını değiştirin.
Oluşturulan CSS'i kopyalamak için Kopyala'ya tıklayın.

Kullanım senaryoları

Front-end geliştiriciler sayfa düzenleri, dashboard yapıları ve resim galerileri için CSS Grid kullanır. Tasarımcılar grid özelliklerini geliştiricilerle paylaşmak için tam CSS olarak dışa aktarır. Tasarım sistemi ekipleri boşluk ve sütun desenlerini prototiplemek için kullanır.

Sık sorulan sorular

1fr ne anlama gelir? — fr kesirli bir birimdir. 1fr mevcut alanın bir bölümü anlamına gelir. repeat(3, 1fr) üç eşit sütun oluşturur.
Grid mi Flexbox mu kullanmalıyım? — İki boyutlu düzenler (satırlar ve sütunlar) için Grid kullanın. Öğeleri tek yönde düzenlerken Flexbox kullanın.
CSS Grid tüm tarayıcılarda destekleniyor mu? — Evet. CSS Grid 2017'den bu yana tüm modern tarayıcılarda tam olarak desteklenmektedir.