6XC

Grid Kolon Hesaplayıcı

Konteyner, kolon sayısı ve gutter'dan kolon genişlikleri — kopyalanabilir CSS grid kodu ve çoklu kolon (span) ölçüleriyle.

822 görüntülenme

Kolon Matematiği

Kolon = (konteyner − (kolon−1) × gutter) ÷ kolon. 1200 px konteyner, 12 kolon, 24 px gutter → 78 px kolon; 4 kolona yayılan eleman 4×78 + 3×24 = 384 px. Araç her yayılım (span) genişliğini listeler; tasarım dosyasına kesin ölçü çekebilirsiniz.

CSS'te bunları elle yazmazsınız: display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px bölmeyi tarayıcıya yaptırır. Piksel değerleri Figma çerçeveleri, görsel dışa aktarımları ve 1fr'nin kırılımınızda gerçekte kaça çözüldüğünü bilmek için gerekir.

Sıkça Sorulan Sorular

Kenar boşlukları konteynere dahil mi?

Hayır — içerik genişliğini girin (konteyner eksi yan marjlar/padding). 1440 px tasarımda her yandan 120 px marj varsa çalışma konteyneri 1200 px'tir.

12 kolon mu, başka mı?

12; 2, 3, 4 ve 6'ya bölündüğü için varsayılan oldu. Yoğun panolar bazen 24 kullanır; sade tanıtım sayfalarına 6 hatta 4 yeter.

Benzer Araçlar

CSS Gradient Oluşturucu Doğrusal, dairesel ve konik CSS degradelerini canlı önizlemeyle tasarlayın, kodu kopyalayın. Oluştur CSS Box Shadow (Gölge) Oluşturucu Kutu gölgesini görsel olarak tasarlayın — kaydırma, bulanıklık, yayılma, renk, opaklık ve inset — canlı önizlemeli. Oluştur CSS Border Radius Oluşturucu Köşeleri tek tek veya hep birlikte, px ya da % olarak yuvarlayın — canlı önizleme ve kopyalanabilir CSS. Oluştur CSS Text Shadow (Yazı Gölgesi) Oluşturucu Yazı gölgesini kaydırma, bulanıklık, renk ve opaklıkla tasarlayın — örnek metin üzerinde canlı önizleme. Oluştur