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

Holy Grail CSS Grid Layout — Cod gata

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 grile preîncărcat cu aspectul Sfântului Graal: trei coloane și trei rânduri, cu antet și subsol care se întind pe toată lățimea și un rând de navigare/principal/deoparte între ele. Rândul antetului folosește înălțimea automată, rândul din mijloc umple spațiul rămas, iar cele două coloane laterale sunt fixate la 200px, în timp ce coloana principală ocupă restul.

Aspectul Sfântului Graal și-a câștigat numele pentru că era cu adevărat greu de construit în mod fiabil înainte de CSS Grid - ani de hack-uri de flotare, aranjamente de tabel și poziționare absolută au încercat să falsească această formă exactă. Cu zonele-șablon-grilă, acesta se prăbușește la cinci regiuni numite și o mână de dimensiuni de piste, motiv pentru care rămâne primul exemplu standard pentru predarea Grid-ului CSS.

Fiecare număr și decalaj de pe această pagină este încă activ: micșorați coloanele laterale, adăugați un al patrulea rând sau redenumiți o zonă și previzualizarea și actualizarea CSS copiabilă imediat. Copiați blocurile CSS și HTML direct în proiectul dvs. - totul rulează local în browser, nimic nu este încărcat.

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