CSS Grid Izgara Oluşturucu
Tasarım & GörselSatır, sütun ve boşluk ayarlarını görsel olarak yapılandırıp CSS Grid ve Tailwind kodlarını elde edin.
Grid Izgara Ayarları
Sütun Sayısı (Cols)3
Satır Sayısı (Rows)3
Sütun Boşluğu (Gap X)16px
Satır Boşluğu (Gap Y)16px
Item 1r1 : c1
Item 2r1 : c2
Item 3r1 : c3
Item 4r2 : c1
Item 5r2 : c2
Item 6r2 : c3
Item 7r3 : c1
Item 8r3 : c2
Item 9r3 : c3
Oluşturulan CSS & Tailwind
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); column-gap: 16px; row-gap: 16px;
☕Bağımsız Proje Desteği
ToolsApp'i Sevdiniz mi? Bir Kahve Ismarlayın
ToolsApp; abonelik, paywall veya veri takibi olmadan %100 tarayıcıda çalışır. Temel dijital araçların herkes için daima ücretsiz ve erişilebilir kalması gerektiğine inanıyoruz. Bir fincan kahve desteğiniz, altyapı giderlerimizi karşılamamıza ve yeni araçlar geliştirmemize güç verir!
%100 İstemci Taraflı•Herkes İçin Ücretsiz
CSS Grid Izgara Oluşturucu Nasıl Kullanılır?
1
Sütun ve Satır Belirleyin
Izgara için sütun ve satır sayılarını seçin.
2
Boşlukları Ayarlayın
Sütun ve satır arası gap mesafelerini girin.
3
Kodu Alın
CSS veya Tailwind kodunu projenize ekleyin.
Gizlilik Güvencesi:Bu araçtaki tüm hesaplamalar ve dönüştürme işlemleri %100 istemci taraflı (JavaScript) olarak tarayıcınızda gerçekleştirilir. Verileriniz hiçbir sunucuya yüklenmez veya kaydedilmez.
Kullanıcı Yorumları & Değerlendirmeler
Deneyiminizi anonim olarak paylaşın. Yorumlar yapay zeka ile denetlenir.
5.0
•0 yorumYayınlanan Yorumlar (0)
Yorumlar yükleniyor...