dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
Generator CSS gratuit

Generator grid-template-areas

Desenezi zonele unui layout CSS Grid cu mouse-ul pe o grilă de până la 6 × 6, verifici dacă fiecare zonă e un dreptunghi și primești grid-template-areas aliniat, regulile grid-area și scheletul HTML.

Exemple de layout cu grid-template-areas

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Holy Grail Antet și subsol pe toată lățimea, meniu, conținut și coloană laterală la mijloc.
.layout {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  gap: 16px;
  min-height: 100vh;
}
Blog cu sidebar și versiune pentru telefon Pe ecrane înguste schimbi doar zonele; HTML-ul rămâne la fel.
.layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas:
    "header  header"
    "main    sidebar"
    "footer  footer";
  gap: 24px;
}

@media (max-width: 800px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main" "sidebar" "footer";
  }
}
Dashboard Meniul ocupă toată înălțimea, graficul ocupă un bloc de 2 × 2.
grid-template-columns: 220px 1fr 1fr 1fr;
grid-template-areas:
  "sidebar header header header"
  "sidebar stats  stats  stats"
  "sidebar chart  chart  activity"
  "sidebar chart  chart  activity";
Celule goale cu punct Punctul lasă o celulă liberă; aici logo-ul stă singur, cu spațiu în dreapta lui.
grid-template-areas:
  "logo .    meniu"
  "main main main";
Greșit: zonă în formă de L main nu este dreptunghi, așa că browserul ignoră toată declarația grid-template-areas.
/* invalid */
grid-template-areas:
  "header header"
  "main   sidebar"
  "main   main";

Cum folosești generatorul de grid-template-areas

  1. Alege numărul de coloane și de rânduri (1–6 fiecare) sau pornește de la un exemplu: Holy Grail, blog cu sidebar, dashboard, galerie.
  2. Scrie numele zonelor, separate prin virgulă. Când schimbi un nume, celulele zonei sunt redenumite.
  3. Alege o zonă din lista de deasupra grilei, apoi dă clic pe o celulă sau trage peste mai multe ca să umpli un dreptunghi. gol (.) golește celulele.
  4. Completează lățimea coloanelor, înălțimea rândurilor și spațiul dintre celule, apoi copiază codul. Totul se întâmplă în browser; nu se trimite nimic către server.

Regulile pentru grid-template-areas

Fiecare șir între ghilimele este un rând, iar fiecare cuvânt este o celulă. Toate rândurile trebuie să aibă același număr de celule, iar punctul (.) înseamnă o celulă goală. Fiecare zonă trebuie să fie un dreptunghi: o formă de L sau două bucăți despărțite fac toată declarația invalidă, iar browserul o ignoră complet. Generatorul marchează astfel de zone cu roșu.

.layout {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header header"
    "sidebar main   main"
    "footer  footer footer";
  gap: 16px;
}

.header { grid-area: header; }

Spațiile în plus dintre nume nu contează pentru browser; generatorul aliniază coloanele doar ca să vezi forma layout-ului direct în cod.

Layout diferit pe telefon

Avantajul zonelor numite este că poți rearanja tot layout-ul dintr-un singur loc. Pe ecrane mici rescrii doar grid-template-areas și coloanele într-un @media, fără să schimbi HTML-ul:

@media (max-width: 700px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main" "sidebar" "footer";
  }
}

Întrebări frecvente

Ce nume pot da zonelor?

Orice identificator CSS: litere, cifre, cratimă și liniuță jos, fără să înceapă cu o cifră. Nu folosi cuvinte rezervate ca auto sau span.

Ce se întâmplă dacă am mai multe lățimi decât coloane?

Pistele în plus există, dar sunt goale. Dacă sunt mai puține, coloanele fără lățime primesc mărimea implicită. Generatorul te avertizează în ambele cazuri.