CSS Grid Üretici

Bu araç ne işe yarar?

CSS Grid Oluşturucu, grid-template-columns ve grid-template-rows değerlerini düzenlemenizi, gap ayarlamanızı ve sonucu canlı önizlemede görmenizi sağlar. Hazır şablonlar ve auto-fill seçeneğiyle sütun düzenlerini hızlıca kurmak isteyen geliştiriciler için idealdir.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Hızlı şablonlar ve auto-fill

Tek tıkla 2, 3, 4 veya 12 sütunlu repeat(n, 1fr) düzenleri ya da 250px 1fr biçimindeki Sidebar ve 200px 1fr 200px biçimindeki Holy Grail yerleşimlerini uygulayabilirsiniz. Auto-fill düğmesi, repeat(auto-fill, minmax(200px, 1fr)) kuralını üretir; minimum öğe genişliğini 100-400px arasında kaydırarak ekrana göre kendiliğinden sarmalanan duyarlı bir ızgara elde edersiniz.

İnce ayar ve önizleme

grid-template-columns ve grid-template-rows alanlarına doğrudan kendi değerlerinizi (örneğin '1fr 2fr' veya 'auto 1fr auto') yazabilirsiniz. Gap kaydırıcısı 0-40px arası boşluk verir; önizleme kaydırıcılarıyla görünen sütun ve satır sayısını değiştirip bloşların nasıl dizildiğini görürsünüz. Beğendiğiniz .grid-container kuralını tek tıkla kopyalayıp projenize yapıştırın.

Sıkça sorulan sorular

auto-fill ile sabit sütun sayısı arasındaki fark nedir?

Sabit repeat(3, 1fr) her zaman 3 sütun oluşturur. minmax ile auto-fill ise konteyner genişliğine kaç tane minimum genişlikteki öğe sığıyorsa o kadar sütun açar; bu, medya sorgusu yazmadan duyarlı ızgaralar için idealdir.

1fr birimi tam olarak ne anlama gelir?

fr, ızgaradaki mevcut boş alanın bir 'kesirini' temsil eder. 'repeat(3, 1fr)' kalan alanı üç eşit parçaya böler; '1fr 2fr' ise alanın üçte birini ve üçte ikisini iki sütuna ayırır.

Üretilen kod ızgara öğelerinin yerleşimini de içerir mi?

Hayır, araç yalnızca üst .grid-container kuralını üretir. Belirli öğeleri birden çok sütun veya satıra yaymak için grid-column ya da grid-row özelliklerini kendiniz eklemeniz gerekir.