UTILS.
%100 tarayıcıda

CSS Grid Oluşturucu

Ayarlanabilir sütun, satır ve boşlukla, canlı önizleme eşliğinde bir CSS grid düzeni oluşturun.

Bu araç hakkında

CSS Grid Oluşturucu, üç basit denetimi — sütun sayısı, satır sayısı ve boşluk — yapıştırmaya hazır bir CSS grid düzenine çeviren, ücretsiz ve tarayıcıda çalışan bir araçtır. Değerleri belirleyin, canlı bir önizlemenin yeniden çizilmesini izleyin ve oluşturulan kuralı kopyalayın.

Sütunlar ve satırlar 1 ile 12 arasında (varsayılan 3 ve 2) tam sayılardır ve boşluk, 0 ile 40 piksel arası bir kaydırıcıdır (varsayılan 10). Her iki boyut da repeat() ve 1fr birimiyle yazılır; böylece her parça mevcut alanı eşit olarak paylaşır. Önizleme, her hücreyi numaralı ve renkli bir blokla doldurur, böylece parça yapısını bir bakışta görebilirsiniz; çıktı ise display: grid, grid-template-columns, grid-template-rows ve gap kullanan düz bir .grid kuralıdır. Tek tık, onu panonuza kopyalar.

Her şey tamamen tarayıcınızda çalışır — yükleme yok, hesap yok, takip yok — ve sayfa bir kez yüklendikten sonra çevrimdışı çalışmaya devam eder.

Sık sorulan sorular

Parçalar nasıl boyutlandırılır?
Hem sütunlar hem de satırlar repeat() ve 1fr birimiyle yazılır; böylece tüm parçalar mevcut alanı eşit olarak paylaşır.
Boşluk denetimi ne yapar?
Her hücre arasındaki grid boşluğunu 0 ile 40 arası piksel olarak ayarlar ve hem önizlemeye hem de oluşturulan CSS'e canlı olarak uygulanır.
Denetimler hangi aralıklara izin verir?
Sütunlar ve satırlar 1 ile 12 arası tam sayıları kabul eder; boşluk kaydırıcısı 0 ile 40 piksel arasındadır. Aralık dışı veya sayısal olmayan girişler sıkıştırılır ve varsayılan 3 sütun, 2 satır ve 10px boşluğa döner.
Hangi CSS'i çıktı verir?
display: grid, her biri repeat() ve 1fr ile ayarlanmış grid-template-columns ve grid-template-rows ile piksel cinsinden boşluğu içeren bir .grid kuralı. Kopyala düğmesi bu kuralı olduğu gibi panonuza yerleştirir.

Daha fazla araç