CSS Grid Oluşturucu
Görsel CSS Grid düzen oluşturucu. Sütunları, satırları, boşlukları ve hizalamayı özelleştirin. Üretilen CSS ve HTML kodunu kopyalayın.
Ayarlar
Item Properties
Önizleme
Oluşturulan Kod
CSS Grid Oluşturucu Hakkında
CSS Grid düzenini görsel olarak kurun: her biri en fazla on iki olmak üzere sütun ve satır sayısını belirleyin, satır ve sütun boşluklarını ayarlayın, 1fr, 200px veya auto gibi parça boyutları yazın. Herhangi bir hücreye tıklayarak açık grid-column ve grid-row başlangıç ve bitiş değerleriyle yayılma verin; siz çalıştıkça önizleme güncellenir, karşılık gelen CSS ve HTML de kopyalanmaya hazır biçimde yazılır. Hazır düzenler arasında holy grail, kenar çubuğu, gösterge paneli ve kart ızgaraları gibi yaygın şablonlar bulunur. Her şey tarayıcıda yerel olarak oluşturulur.
Kullanım alanları
Nasıl kullanılır
Hazır bir düzenle başlayın - Holy Grail, Kenar Çubuğu, Kontrol Paneli, Galeri, Blog veya Kartlar - ya da ızgarayı sıfırdan kurun.
Ayarlar panelinde Sütunlar ve Satırlar kaydırıcılarını 1 ile 12 arasında, Sütun Boşluğu ve Satır Boşluğu kaydırıcılarını 0 ile 64px arasında sürükleyin.
Her sütun ve satır için boyut kutularını düzenleyerek 1fr yerine 250px, auto veya minmax(200px, 1fr) gibi değerler yazın.
Önizlemedeki renkli bir bloğa tıklayarak seçin, ardından hücreler boyunca uzanması için Col Start, Col End, Row Start, Row End ve Label değerlerini ayarlayın.
justify-items ve align-items için iki hizalama açılır menüsünü stretch, start, center ve end arasında değiştirin.
Sonucu Üretilen Kod bölümünden alın: CSS düğmesi, HTML düğmesi ya da işaretleme ile stil dosyasını birlikte almak için Tümünü Kopyala.
Profesyonel İpuçları
- İçeriğinizi doğrudan yapıştırın — CSS Grid Oluşturucu yaygın girdi biçimlerini algılar ve uygun varsayılanları otomatik uygular.
- CSS Grid Oluşturucudaki iş akışınızı hızlandırmak için klavye kısayollarını kullanın (tümünü seçmek için Ctrl/Cmd+A, kopyalamak için Ctrl/Cmd+C).
- Çok büyük girdileri parçalara bölün — çoğu tarayıcı sekmesi megabaytlarca metni kaldırabilir, ancak devasa verileri ayrıştırmak arayüzü kısa süreliğine dondurabilir.
- CSS Grid Oluşturucu girdilerinizi kaydetmez ya da saklamaz. Bir geçmişe ihtiyacınız varsa önemli çıktıları yerel bir dosyaya veya not uygulamasına kopyalayın.
- Tarayıcınızdan çıkmadan uçtan uca veri akışları kurmak için CSS Grid Oluşturucuyu bu sitedeki diğer araçlarla (biçimlendiriciler, dönüştürücüler, kodlayıcılar) birlikte kullanın.
Sık Sorulan Sorular
Evet, tamamen ücretsiz: kayıt yok, API anahtarı yok, filigran yok, kullanım sınırı yok.
Hayır. CSS Grid Oluşturucu tamamen istemci tarafında, sizin tarayıcınızda çalışır. Girdiğiniz veriler sunucularımıza hiç ulaşmaz.
Kesin bir sınır yok, ancak birkaç megabaytı aşan girdilerde cihazınızın belleğine bağlı olarak yavaşlama beklemelisiniz.
Evet. CSS Grid Oluşturucu ile ürettiğiniz çıktılar sizindir; kişisel ya da ticari her projede özgürce kullanabilirsiniz.
Mantığın büyük bölümü istemci tarafındaki JavaScript ile çalışır; bu nedenle sayfa bir kez yüklendikten sonra çoğu zaman ağ bağlantısı olmadan da çalışmaya devam edebilirsiniz.
Yok. CSS Grid Oluşturucu tarayıcınızda çalıştığı için API anahtarı ya da kısıtlama olmadan, donanımınızın elverdiği kadar çok girdi işleyebilirsiniz.