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

Bara laterală + Aspect grilă CSS de conținut

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ă cu un aspect cu două coloane și un rând deja numit: o coloană din bara laterală de 200 de pixeli lângă o coloană de conținut flexibilă care ocupă spațiul rămas. Ambele zone sunt vizibile imediat în previzualizarea live, colorate și etichetate, astfel încât împărțirea să fie evidentă dintr-o privire.

Aceasta este cea mai comună formă de navigare plus conținut de pe web - paginile de setări, site-urile de documentație și tablourile de bord de administrare se sprijină toate pe o șină cu lățime fixă lângă o zonă principală fluidă. Deoarece coloana din bara laterală folosește o valoare de pixeli, iar coloana de conținut folosește 1fr, bara laterală rămâne o lățime constantă, în timp ce coloana de conținut absoarbe fiecare pixel suplimentar al ferestrei de vizualizare.

Redenumiți oricare dintre zone, modificați lățimea coloanei sau adăugați mai multe rânduri pentru un antet deasupra diviziunii - rezultatele CSS și HTML de mai jos urmăresc fiecare editare în timp real. Instrumentul este gratuit și continuă să funcționeze în întregime în browser, fără încărcare și fără cont.

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