Design / Layout

Generatore CSS Grid (creatore visivo di grid-template-areas)

Imposta colonne, righe e spaziatura, trascina sulle celle per creare aree con nomi come header, sidebar e main, quindi copia il CSS con grid-template-columns, grid-template-rows e grid-template-areas, pronto da incollare.

Generatore CSS Grid (creatore visivo di grid-template-areas): Le dimensioni delle tracce vengono scritte mentre le inserisci, ad esempio 200px 1fr 1fr, e le dimensioni ripetute diventano repeat(). Ogni area diventa un nome in grid-template-areas, con un punto per le celle vuote, e una regola che posiziona un elemento con grid-area. Come richiesto da CSS, le aree devono essere rettangolari e non possono sovrapporsi; il layout viene memorizzato in questo browser. Funziona al 100% localmente nel browser, senza caricare file sul server.

Categoria
Strumenti per sviluppatori
Esecuzioni
Nel browser
Costo
Gratuito · senza registrazione
Disponibilità
Pronto all'uso
Generatore di griglie CSSElaborazione locale

Funziona interamente nel browser

Trascina sulle celle per creare un'area; può estendersi su più righe e colonne. Inserisci dimensioni delle tracce come 1fr, 200px, auto o minmax(100px, 1fr).

CSS

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

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

Assegna a ogni elemento figlio la classe della sua area. Le celle indicate con un punto restano vuote.

Aree con nome

Ogni stringa in grid-template-areas corrisponde a una riga e ogni parola a una cella: "header header" "sidebar main" posiziona l'intestazione su entrambe le colonne. Un elemento figlio con grid-area: main riempie ogni cella denominata main. I nomi non devono corrispondere ai nomi delle classi, ma mantenerli uguali rende il CSS più facile da leggere.

Dimensioni comuni delle tracce

minmax(200px, 1fr) mantiene una colonna larga almeno 200 px, ma le consente di espandersi; auto si adatta al contenuto; repeat(auto-fill, minmax(12rem, 1fr)) crea il maggior numero possibile di colonne, un modello utile per le griglie di schede. La spaziatura può diventare fluida con il generatore CSS clamp.

Come usarlo

  1. Scegli il numero di colonne e righe e inserisci le relative dimensioni.
  2. Trascina sulle celle per creare le aree e rinominale.
  3. Copia il CSS e assegna a ogni elemento figlio la classe della relativa area.

Privacy e limitazioni

Il layout viene creato nel tuo browser.

Strumenti correlati

CSS clamp()Box shadowFormattatore CSSFlexboxClip-path

Domande frequenti

Che cosa significa fr?

Una frazione dello spazio libero: 1fr 2fr assegna alla seconda colonna una larghezza doppia rispetto alla prima, dopo aver sottratto le dimensioni fisse e le spaziature.

Perché le aree non possono sovrapporsi o avere una forma a L?

grid-template-areas accetta solo rettangoli, ciascuno con un solo nome. In CSS Grid è possibile sovrapporre gli elementi, ma servono i numeri di riga espliciti invece delle aree con nome.

Come posso rendere il layout responsive?

Usa il CSS generato per il layout ampio e ridefinisci grid-template-columns e grid-template-areas all'interno di una media query per gli schermi stretti.

Strumento gratuito · nel browser esecuzioni · senza account