CSS Grid Oluşturucu
CSS Grid Generator; sütun ve satır sayısı, boşluklar, isteğe bağlı özel grid-template değerleri ve öğe hizalamasıyla, canlı önizleme ve kopyalamaya hazır CSS sunan grid düzenleri oluşturur.
Bu araç hakkında
CSS Grid Generator; sütun ve satır sayısı, boşluklar, isteğe bağlı özel grid-template değerleri ve öğe hizalamasıyla, canlı önizleme ve kopyalamaya hazır CSS sunan grid düzenleri oluşturur.
Nasıl kullanılır
- Sütun ve satır sayısını ayarlayın.
- Sütun ve satır boşluklarını ayarlayın.
- İsterseniz 200px 1fr 1fr gibi özel şablonlar girin.
- justify-items ve align-items'ı seçip Copy CSS'e tıklayın.
Bilmekte fayda var
- fr birimi boş alanı paylaştırır: 1fr 2fr, ikinci sütuna birincinin iki katı genişlik verir.
- repeat(3, 1fr), üç eşit sütunun kısa yazımıdır.
- column-gap ve row-gap izler arasındaki boşlukları belirler.
- Grid iki boyutludur; satırları ve sütunları birlikte kontrol eder.
- repeat(auto-fit, minmax(200px, 1fr)) medya sorgusu olmadan duyarlı bir grid oluşturur.
Tamamen tarayıcınızda çalışır — girdiğiniz hiçbir şey yüklenmez veya saklanmaz.
Sık sorulan sorular
CSS'te 3 sütunlu grid nasıl oluşturulur?
Kapsayıcıda display: grid; grid-template-columns: repeat(3, 1fr); kullanın ve boşluk için bir gap ekleyin.
CSS Grid'de fr ne anlama gelir?
fr, grid kapsayıcısındaki kullanılabilir boş alanın bir kesridir.
CSS Grid mi Flexbox mı?
Grid, sayfa yapıları ve kart ızgaraları gibi iki boyutlu düzenler için; Flexbox ise tek boyutlu satır veya sütunlar için en iyisidir.
Medya sorgusu olmadan duyarlı grid nasıl yapılır?
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); kullanın; sütunlar alan elverdikçe otomatik olarak alt satıra geçer.