⭐ 0
🔍
Text Imagine PDF și Documente Audio Muzică Electronică Timp Utilitare Validatoare Ezoterism Jocuri

Aspect grilă CSS cu 3 coloane egale

Proiectați vizual layout-uri de grilă CSS: setați coloane, rânduri și goluri, apoi introduceți numele zonelor în celule pentru a construi zone de șablon de grilă - cu o previzualizare live și CSS și HTML care pot fi copiate.

Introduceți un nume în orice celulă de mai jos; celulele cu același nume se îmbină într-o regiune grilă-șablon-zone.

Procesare... 0%

Rezultat

Această pagină deschide generatorul de grilă setat la trei coloane de lățime egală într-un singur rând, cu zonele numite dezactivate - aspectul este doar repetat (3, 1fr), cel mai scurt mod de a spune „trei coloane care împart întotdeauna lățimea disponibilă în mod egal”.

Coloanele cu lățime egală sunt calul de lucru al grilelor de carduri, al tabelelor de prețuri și al galeriilor de imagini: nicio zonă nu are nevoie de denumire, deoarece fiecare coloană joacă același rol, astfel încât dimensiunea simplă a pistei este mai clară decât ar fi o declarație grid-șablon-zone. Adăugați un rând și aceleași trei piese se repetă dedesubt, totuși perfect egale.

Creșteți numărul de coloane pentru o grilă mai densă sau activați zonele numite dacă o coloană ulterioară trebuie să iasă în evidență de restul - CSS și HTML de mai jos se actualizează în momentul în care o faceți. Totul rulează pe partea clientului, așa că nu există nimic de încărcat și nimic de așteptat.

🛡️
Rulat în browser

Fișierele și datele introduse nu părăsesc niciodată acest dispozitiv. Procesarea rulează complet offline. 100% sigur.

Formate și reguli acceptate

  • Intrări de numere pentru 1–6 coloane și rânduri, plus controale separate pentru intervalul de coloană și rând, care se combină într-o singură valoare a intervalului atunci când se potrivesc.
  • Un mod cu zone numite: introduceți un nume de zonă direct în orice celulă a grilei live; instrumentul construiește un șir de zone de șablon de grilă valid și avertizează când numele nu formează dreptunghiuri curate.
  • Bloc CSS copiabil (afișare: grilă, grid-șablon-coloane/rânduri, gol, grid-șablon-zone) plus un schelet HTML potrivit cu un div-zonă de grilă per regiune numită.

Beneficii cheie

✓ Introduceți un nume direct în orice celulă și numele care se potrivesc se îmbină într-o regiune de zone de șablon de grilă - fără selecție prin glisare, fără ghicirea manuală a sintaxei șirului ghilime.
✓ Grila de previzualizare live se redimensionează și se recolorează la fiecare modificare, astfel încât să vedeți exact coloana și rândurile și fiecare regiune numită înainte de a copia o singură linie de CSS.
✓ Presetări precum aspectul clasic al Sfântului Graal și o bară laterală îngustă vă oferă o declarație reală, funcțională, a zonelor șablonului de grilă, de la care să începeți, în loc de o grilă goală.

Cazuri de utilizare

  • • Construiți învelișul clasic al paginii Sfântului Graal - antet și subsol la lățime completă cu un rând din mijloc de navigare/principal/deoparte - tastând numele zonelor în loc de a scrie de mână zonele-șablon-grilă.
  • • Aranjați o pagină de setări sau un tablou de bord administrativ cu o bară laterală cu lățime fixă lângă o coloană de conținut flexibilă și copiați exact CSS și HTML odată ce previzualizarea live arată corect.
  • • Verificați dacă un set de zone denumite formează dreptunghiuri valide înainte de expediere - instrumentul semnalează numele exacte care ar sparge zonele-șablon-grilă în browser.