CSS grid oluşturucu

CSS grid oluşturucu

Bir sayfa düzeninin kaba taslağını yapıştırın ve bu araç onu işleyen CSS grid koduna dönüştürür. Düzenin her satırını ayrı bir satıra yazın ve aynı kelimeyi cellalar arasında tekrarlayarak adlandırılmış bölgeleri işaretleyin — bir satırda "header header", bir sonrakinde "nav main", sonuncuda "footer footer" klasik üç satırlı düzeni tam genişlikte başlık ve alt bilgisiyle açıklar. Araç tekrarlanan adları ızgara alanları olarak okur ve otomatik olarak eşleşen grid-template-areas bildirimini oluşturur.

Seçenekler oluşturulan CSS kodunun geri kalanını kontrol eder. Cellalar arasındaki boşluğu pikselde ayarlayın ve isteğe bağlı olarak geçerli herhangi bir CSS izleme boyutu kullanarak açık sütun veya satır yükseklikleri belirleyin — fr birimleri, auto veya minmax(); her iki alanı da boş bırakın ve araç bunun yerine eşit aralıklı izler kullanır. Alan başına kuralları etkinleştirerek seçtiğiniz bir sınıf adı ön eki kullanarak her adlandırılmış bölüm için hazır bir grid-area bildirimi alın, böylece "header" hemen .grid-header olur. Duyarlı bir seçenek, dar ekranlarda tüm düzeni tek bir sütuna daralan bir max-width sorgusu ekler ve bir HTML seçeneği, yapıyı CSS'nin yanında görebilmeniz için eşleşen bir işaretleme iskeletini ekler.

Aynı adlı iki hücre katı bir dikdörtgen oluşturmazsa — L şeklinde veya bir hücreyi atlayan bir ad — gerçek CSS grid bu alanı düzgün şekilde işleyemez, bu nedenle araç bunu çıktıda doğrudan uyarı açıklaması olarak işaretler ve sessizce geçersiz görünümlü kurallar oluşturmaz. Herhangi bir işletim sisteminden gelen satır sonları aynı şekilde işlenir ve çıktının altında görünen canlı sayaç, oluşturulan CSS'nin kaç düzen satırı, adlandırılmış alan ve karakter içerdiğini izler.

Her şey yerel olarak tarayıcınızda çalışır; çizdiğiniz düzen ve aldığınız CSS kodu hiçbir yere gönderilmez. Sonucu kopyalayın, .txt dosyası olarak indirin veya doğrudan CSS biçimlendirici gibi başka bir araçla çıktıyı göndererek girintileri daha da düzeltmek için.

FAQ