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

3 Eşit Sütunlu 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, adlandırılmış alanlar kapalıyken, tek bir satırda üç eşit genişlikte sütuna ayarlanmış ızgara oluşturucuyu açar - düzen yalnızca tekrardan (3, 1fr) oluşur, "mevcut genişliği her zaman eşit olarak bölen üç sütun" demenin en kısa yolu.

Eşit genişlikteki sütunlar, kart ızgaralarının, fiyatlandırma tablolarının ve görüntü galerilerinin en önemli unsurudur: her sütun aynı rolü oynadığı için hiçbir alanın adlandırılmasına gerek yoktur, dolayısıyla düz yol boyutlandırması, ızgara şablon alanları bildiriminden daha nettir. Bir sıra ekleyin ve aynı üç parça altta yinelenerek yine mükemmel şekilde eşitlensin.

Daha yoğun bir ızgara için sütun sayısını artırın veya daha sonraki bir sütunun diğerlerinden öne çıkması gerekiyorsa adlandırılmış alanları açın; aşağıdaki CSS ve HTML, siz bunu yaptığınız anda güncellenir. Her şey istemci tarafında çalışır, dolayısıyla yüklenecek veya beklenecek hiçbir şey yoktur.

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