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

Kutsal Kase CSS Izgara Düzeni - Hazır Kod

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, kutsal kâse düzeniyle önceden yüklenmiş ızgara oluşturucuyu açar: üç sütun ve üç satır, üstbilgi ve altbilgi tüm genişliği kaplar ve arada bir gezinme/ana/kenar satırı bulunur. Başlık satırı otomatik yüksekliği kullanır, orta satır kalan alanı doldurur ve iki yan sütun 200 piksel olarak sabitlenirken gerisini ana sütun alır.

Kutsal Kase düzeni adını aldı çünkü CSS Grid'den önce güvenilir bir şekilde inşa edilmesi gerçekten zordu; yıllar süren kayan nokta hileleri, masa düzenleri ve mutlak konumlandırma, bu tam şekli taklit etmeye çalışmıştı. Izgara şablon alanları ile beş adlandırılmış bölgeye ve bir avuç iz boyutuna daraltılır, bu nedenle CSS Izgarasını öğretmek için standart ilk örnek olarak kalır.

Bu sayfadaki her sayı ve boşluk hala yayında: yan sütunları küçültün, dördüncü bir satır ekleyin veya bir alanı yeniden adlandırın ve önizlemeyi ve kopyalanabilir CSS güncellemesini hemen yapın. CSS ve HTML bloklarını doğrudan projenize kopyalayın; her şey tarayıcınızda yerel olarak çalışır, hiçbir şey yüklenmez.

🛡️
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.