CSS Grid Oluşturucu
Sütun, satır ve boşluk değerlerini belirleyerek web projeleriniz için anında CSS Grid kodu oluşturun.
Aracı çalıştır
CSS Grid Oluşturucu, web sayfalarınız için modern ızgara düzenleri tasarlamanızı ve temiz CSS kurallarını saniyeler içinde üretmenizi sağlar. Araç, sütun ve satır şablonları ile ızgara boşluklarını pratik bir arayüzde bir araya getirir. Sütun veya satır alanına yalnızca tam sayı girdiğinizde, sistem bu değeri otomatik olarak repeat sözdizimine dönüştürür. Örneğin sütun kutusuna 3 yazdığınızda üç eşit sütunluk esnek bir yerleşim kuralı oluşturulur. İhtiyacınıza göre 200px 1fr gibi özel metinler veya kesirli CSS ölçüleri de tanımlayabilirsiniz. Genel boşluk değeri sıfırdan büyük olduğunda piksel birimiyle genel gap kuralı eklenir. Yatay ve dikey mesafeleri bağımsız yönetmek istediğinizde ise sütun boşluğu ve satır boşluğu alanlarına sayısal değerler girebilirsiniz. Çalıştır butonuna bastığınızda sonuç panelinde display: grid bildirimi ile birlikte sütun ve satır şablonları eksiksiz görüntülenir. Hazırlanan CSS kodunu doğrudan kopyalayıp stil dosyalarınıza ekleyerek arayüz geliştirme adımlarınızı hızlandırabilirsiniz.
Kullanım
- Sütun alanına bir sütun adedi (örneğin 3) veya özel bir şablon (örneğin 200px 1fr) yazın.
- Satır alanına auto veya istediğiniz satır sayısını girin.
- Izgara hücreleri arasındaki genel boşluk için piksel cinsinden bir sayı belirleyin.
- Gerekirse sütunlar arası ve satırlar arası mesafeleri ayrı boşluk alanlarına yazın.
- Üretilen CSS kodunu kopyalayarak stil dosyanıza veya stil etiketlerinize yapıştırın.
Örnekler
- Sütunlar: 3, Satırlar: auto, Genel Boşluk: 10 girildiğinde üç sütunlu ve 10px boşluklu temel ızgara kodu üretilir.
- Sütunlar: 200px 1fr, Satırlar: auto, Sütun Boşluğu: 20, Satır Boşluğu: 15 girildiğinde sabit kenar çubuğuna ve esnek ana alana sahip ızgara kodu hazırlanır.
SSS
Sütun kutusuna yalnızca bir sayı girdiğimde ne olur?
Yalnızca rakamlardan oluşan bir değer girdiğinizde sistem bu sayıyı repeat kalıbına dönüştürür. Örneğin 4 girdiğinizde repeat(4, 1fr) kuralı elde edilir.
Özel sütun genişlikleri kullanabilir miyim?
Evet. Sütun kutusuna 200px 1fr 1fr gibi piksel veya kesirli birimler içeren özel metinler yazabilirsiniz. Sistem bu metinleri olduğu gibi kurala aktarır.
Boşluk değerleri hangi ölçü birimini kullanır?
Boşluk alanlarına girilen sayısal değerler piksel (px) birimiyle CSS çıktısına eklenir. Değer 0 bırakıldığında ilgili boşluk satırı oluşturulmaz.