⭐ 0
🔍
Metin Görsel PDF ve Belgeler Ses Müzik Elektronik Zaman Faydalı Araçlar Doğrulayıcılar Ezoterizm Oyunlar

Kenar Çubuğu + İçerik CSS Izgara Düzeni

CSS Izgara düzenlerini görsel olarak tasarlayın: sütunları, satırları ve boşluğu ayarlayın, ardından canlı önizleme ve kopyalanabilir CSS ve HTML ile ızgara şablon alanları oluşturmak için hücrelere alan adlarını yazın.

Aşağıdaki herhangi bir hücreye bir ad yazın; aynı ada sahip hücreler, tek bir ızgara şablonu alanları bölgesinde birleşir.

İşleniyor... 0%

Sonuç

Bu sayfa, ızgara oluşturucuyu zaten adlandırılmış iki sütunlu, tek satırlı bir düzen ile açar: kalan alanı kaplayan esnek bir içerik sütununun yanında 200 piksellik bir kenar çubuğu sütunu. Her iki alan da canlı ön izlemede anında görülebiliyor, renklendiriliyor ve etiketleniyor, böylece bölünme bir bakışta açıkça görülebiliyor.

Bu, web'deki en yaygın gezinme artı içerik şeklidir; ayarlar sayfaları, dokümantasyon siteleri ve yönetici kontrol panellerinin tümü, akıcı bir ana alanın yanında sabit genişlikte bir ray üzerinde durur. Kenar çubuğu sütunu bir piksel değeri kullandığından ve içerik sütunu 1fr kullandığından, içerik sütunu görünümün her ekstra pikselini emerken kenar çubuğu sabit genişlikte kalır.

Her iki alanı da yeniden adlandırın, sütun genişliğini değiştirin veya bölmenin üzerindeki başlık için daha fazla satır ekleyin; aşağıdaki CSS ve HTML çıktısı, her düzenlemeyi gerçek zamanlı olarak izler. Araç ücretsizdir ve yükleme veya hesap olmadan tamamen tarayıcınızda çalışmaya devam eder.

🛡️
Tarayıcıda Çalıştırıldı

Dosyalarınız ve girdileriniz bu cihazdan asla ayrılmaz. İşlem tamamen çevrimdışı çalışır. %100 Güvenli.

Kabul Edilen Formatlar ve Kurallar

  • 1-6 sütun ve satırlara yönelik sayı girişlerinin yanı sıra, eşleştiklerinde tek bir boşluk değerinde birleştirilen ayrı sütun boşluğu ve satır boşluğu kontrolleri.
  • Adlandırılmış alanlar modu: Canlı ızgaranın herhangi bir hücresine doğrudan bir alan adı yazın; araç geçerli bir ızgara şablonu alanları dizesi oluşturur ve adlar temiz dikdörtgenler oluşturmadığında uyarı verir.
  • Kopyalanabilir CSS bloğu (ekran: ızgara, ızgara-şablon-sütunları/satırlar, boşluk, ızgara-şablon-alanları) artı adlandırılmış bölge başına bir ızgara alanı div'i içeren eşleşen bir HTML iskeleti.

Temel Faydalar

✓ Herhangi bir hücreye doğrudan bir ad yazın ve eşleşen adlar tek bir ızgara şablonu alanları bölgesinde birleştirilir; sürükleyerek seçime gerek yoktur, alıntılanan dize sözdizimini elle tahmin etmeye gerek yoktur.
✓ Canlı önizleme ızgarası her değişiklikte yeniden boyutlandırılır ve yeniden renklendirilir; böylece tek bir CSS satırını kopyalamadan önce tam sütun ve satır izlerini ve adlandırılmış her bölgeyi görürsünüz.
✓ Klasik kutsal kase düzeni ve dar kenar çubuğu gibi ön ayarlar, size boş bir ızgara yerine başlamanız için gerçek, çalışan bir ızgara şablonu alanları bildirimi sağlar.

Kullanım Durumları

  • • Kılavuz şablon alanları elle yazmak yerine alan adlarını yazarak, klasik kutsal kâse sayfa kabuğunu (gezinme/ana/kenar orta satırıyla birlikte tam genişlikte üst bilgi ve alt bilgi) oluşturun.
  • • Esnek bir içerik sütununun yanında sabit genişlikte bir kenar çubuğu bulunan bir ayarlar sayfası veya yönetici kontrol paneli düzenleyin ve canlı önizleme doğru göründüğünde CSS ve HTML'nin tamamını kopyalayın.
  • • Göndermeden önce bir dizi adlandırılmış alanın gerçekten geçerli dikdörtgenler oluşturup oluşturmadığını kontrol edin; araç, tarayıcıdaki ızgara şablon alanlarını bozacak adları tam olarak işaretler.