Generatore CSS Grid

Crea un layout bidimensionale con tracce esplicite e implicite ed elementi individuali. Il browser calcola il layout; l’editor mostra le regole dichiarate.

Anteprima griglia

Impostazioni della griglia

Dimensioni

Larghezza del campione

100–1600

Altezza del campione

100–1200

Spaziatura

Spaziatura interna

0–48

Spazio tra le righe

0–100

Spazio tra le colonne

0–100

Disposizione e allineamento

Direzione

Modalità di scrittura

Posizionamento automatico

Allineamento contenuto sull’asse inline

Allinea il contenuto

Allineamento elementi sull’asse inline

Allinea gli elementi

Modalità di posizionamento

Dimensioni delle tracce

Riordinare le tracce non modifica il posizionamento degli elementi. Le linee negative si contano dalla fine della griglia esplicita.

Colonne esplicite

Traccia 1

Dimensione traccia

Minimo

Valore

0–1200

Massimo

Valore

0–12

Traccia 2

Dimensione traccia

Minimo

Valore

0–1200

Massimo

Valore

0–12

Traccia 3

Dimensione traccia

Minimo

Valore

0–1200

Massimo

Valore

0–12

Righe esplicite

Traccia 1

Dimensione traccia

Minimo

Valore

0–1200

Massimo

Valore

0–12

Traccia 2

Dimensione traccia

Minimo

Valore

0–1200

Massimo

Valore

0–12

Schema delle colonne implicite

Traccia 1

Dimensione traccia

Dimensione

Schema delle righe implicite

Traccia 1

Dimensione traccia

Dimensione

Elementi nell’ordine del codice sorgente

Testo dell’elemento

Fino a 120 unità di codice UTF-16; il testo non viene interpretato come HTML.

Ordine

-10–10

Dimensione del carattere

8–48

Allineamento elemento sull’asse inline

Allineamento dell’elemento

Dimensione minima

Larghezza preferita

Altezza preferita

Posizione nella colonna

Regola di posizionamento

Posizione nella riga

Regola di posizionamento

Codice generato

.grid-demo {
  display: grid;
  box-sizing: border-box;
  width: 720px;
  height: 400px;
  padding: 16px;
  border: 1px solid #64748B;
  overflow: auto;
  direction: ltr;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);
  grid-template-rows: minmax(80px, 1fr) minmax(80px, 1fr);
  grid-template-areas: none;
  grid-auto-columns: auto;
  grid-auto-rows: auto;
  grid-auto-flow: row;
  row-gap: 12px;
  column-gap: 12px;
  justify-content: start;
  align-content: start;
  justify-items: stretch;
  align-items: stretch;
  color: #0F172A;
  background: #F1F5F9;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

.grid-demo > .grid-item {
  box-sizing: border-box;
  margin: 0;
  padding: 8px;
  border: 1px solid #0F766E;
  background: #CCFBF1;
  white-space: pre-wrap;
  overflow-wrap: normal;
  word-break: normal;
  overflow: visible;
}

.grid-demo > .grid-item-1 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-2 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-3 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-4 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-5 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-6 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

Colonne esplicite: 3 · Righe esplicite: 2 · Elementi nell’ordine del codice sorgente: 6

Usare il codice

Il frammento HTML necessita del CSS. Il download completo dell'esempio utilizza lo stesso documento dell'anteprima, inclusa la reimpostazione del documento e la policy delle risorse.

Ordine visivo e ordine del codice sorgente

Posizionamento, order e riempimento denso possono cambiare l’ordine visivo, ma non quello di lettura o di focus nell’HTML. Sposta gli elementi per cambiare l’ordine sorgente.

Dimensioni dell’anteprima

Adatta ridimensiona solo l’anteprima a dimensioni fisse e non genera breakpoint responsive. Il contenitore scorre se il contenuto eccede lo spazio.

Direzioni della griglia

Colonne: sinistra → destra; righe: alto → basso.

Dettagli della griglia

Dimensioni delle tracce

Riordinare le tracce non modifica il posizionamento degli elementi. Le linee negative si contano dalla fine della griglia esplicita.

Colonne esplicite

minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr)

Righe esplicite

minmax(80px, 1fr) minmax(80px, 1fr)

Schema delle colonne implicite

auto

Schema delle righe implicite

auto

Elementi in ordine sorgente

Elemento 1: Posizione nella colonna auto / auto; Posizione nella riga auto / auto · Ordine: 0 · Dimensione minima: auto
Elemento 2: Posizione nella colonna auto / auto; Posizione nella riga auto / auto · Ordine: 0 · Dimensione minima: auto
Elemento 3: Posizione nella colonna auto / auto; Posizione nella riga auto / auto · Ordine: 0 · Dimensione minima: auto
Elemento 4: Posizione nella colonna auto / auto; Posizione nella riga auto / auto · Ordine: 0 · Dimensione minima: auto
Elemento 5: Posizione nella colonna auto / auto; Posizione nella riga auto / auto · Ordine: 0 · Dimensione minima: auto
Elemento 6: Posizione nella colonna auto / auto; Posizione nella riga auto / auto · Ordine: 0 · Dimensione minima: auto

Disposizione e allineamento

L’allineamento del contenuto posiziona le tracce; quello degli elementi li posiziona nelle rispettive aree. Dimensioni flessibili o stretch possono esaurire lo spazio libero.

Il tuo esempio è generato localmente. Questo strumento non carica né salva il testo o il codice di esempio.

Crea una griglia

Imposta dimensioni, tracce, flusso, direzione, spazi e allineamento.
Modifica testo e posizione, cambia l’ordine sorgente o imposta aree con nome. Correggi i campi incompleti o in conflitto.
Esamina anteprima e codice, copia CSS o HTML oppure scarica il documento completo usato nell’anteprima.

Come funzionano le regole

Le tracce esplicite derivano dal modello; il posizionamento automatico o fuori modello può creare tracce implicite secondo schemi propri.

fr divide lo spazio rimanente secondo Grid, non una percentuale del contenitore esterno. 1fr ha un minimo automatico; minmax(0px, 1fr) lo modifica. Il minimo dell’elemento è distinto.

Linee, order e dense possono cambiare l’ordine visivo senza cambiare lettura o focus dell’HTML. Spostare gli elementi cambia invece l’ordine sorgente.

Le colonne seguono l’asse inline, le righe l’asse block; con scrittura verticale cambiano le direzioni fisiche. Adatta non crea breakpoint.

Esempi

Con larghezza border-box di 640px, bordi di 1px e padding di 16px per lato, il contenuto misura 606px. Tolti due spazi di 12px e una traccia di 120px restano 462px: in condizioni semplici 1fr e 2fr ricevono 154px e 308px. Il risultato reale può variare.

Con tre colonne esplicite, -1 indica l’ultima linea esplicita anche se si creano colonne implicite. Il numero negativo rimane nel CSS.

In due colonne header può occupare la prima riga, nav e main la seconda e footer la terza. Ogni area è rettangolare; le celle vuote usano un punto.

Limiti dell’editor

Ogni asse ammette 1–12 tracce esplicite e 1–4 dimensioni implicite; gli elementi sono 1–12. Sono disponibili minmax, linee, span e rettangoli con nome, non CSS arbitrario.

Non genera repeat, auto-fit, auto-fill, subgrid, masonry, griglie annidate o breakpoint. Tracce flessibili non garantiscono un sito responsive.

Percentuali e spazi possono eccedere il contenitore. Contenuto, caratteri, minimi automatici, bordi e barre di scorrimento influenzano il risultato.

La modalità linee permette sovrapposizioni ma rifiuta due estremi definiti uguali o invertiti. Le aree con nome devono essere univoche, interne e non sovrapposte.

Anteprima e download condividono un documento con margini della pagina azzerati. Su un altro sito stili e metriche del browser possono influire sul frammento.

Esempio locale

Il testo viene sottoposto a escape e il codice creato localmente, senza invio né salvataggio in URL o cronologia. L’anteprima usa sandbox vuoto e una politica restrittiva sulle risorse; ciò non certifica altri servizi o modifiche successive.

Domande su CSS Grid

No. Ridimensiona solo il riquadro a dimensione fissa, senza generare media query o ripetizioni automatiche.

No. fr divide lo spazio rimanente secondo Grid; le percentuali usano un riferimento diverso e i minimi influiscono.

Tracce, spazi e contenuto possono richiedere più spazio. Il contenitore scorre; lo strumento non cambia di nascosto minimi o interruzione delle parole.

Applica min-width: 0px e min-height: 0px all’elemento al posto dei minimi automatici. È separato dal minimo minmax della traccia.

Dalla fine della griglia esplicita, non da quella implicita risultante. La linea zero non è valida.

Ogni elemento richiede un nome valido univoco e un rettangolo positivo, interno e non sovrapposto.

No. Può riempire spazi visivi precedenti senza cambiare ordine HTML o focus predefinito.

Il documento UTF-8 dell’anteprima con CSS, testo sottoposto a escape, azzeramento dei margini e restrizioni delle risorse. Il sandbox dell’iframe non è nel file.

Fonti

Specifiche che descrivono il comportamento dell’esempio.

Descrizioni delle fonti verificate il 09/11/2026.

Il browser calcola il layout; le specifiche non certificano questa implementazione.

Da SVG a PNG

Converti un file SVG locale o il codice incollato in PNG, con dimensioni definite, trasparenza e caratteri inclusi.

Apri strumento — Da SVG a PNG

Generatore di filtri CSS

Ordina e ripeti gli effetti CSS, confronta un campione e copia la dichiarazione esatta.

Apri strumento — Generatore di filtri CSS

Calcolatore della dimensione fluida del testo

Definisci la dimensione del testo per due larghezze del viewport. Copia il CSS relativo alla radice e osserva il modello calcolato con gli stessi coefficienti esportati.

Apri strumento — Calcolatore della dimensione fluida del testo

Generatore di pulsanti CSS

Personalizza gli stati di un pulsante nativo, verifica il focus e copia HTML e CSS.

Apri strumento — Generatore di pulsanti CSS

Generatore CSS border-radius

Modifica otto raggi, visualizza il riquadro e copia il CSS in pixel o percentuale.

Apri strumento — Generatore CSS border-radius

Generatore CSS Flexbox

Crea un esempio Flexbox con controlli di contenitori ed elementi, assi di layout espliciti, CSS e HTML corrispondenti e download locale di un esempio completo.

Apri strumento — Generatore CSS Flexbox

Generatore CSS di ombre del testo

Crea ombre del testo ordinate, visualizza testo semplice e copia il CSS esatto.

Apri strumento — Generatore CSS di ombre del testo

Generatore di trasformazioni CSS

Componi trasformazioni 2D CSS ripetibili, modifica px o la traslazione e l'origine percentuale, ispeziona una casella di riferimento e copia le esatte dichiarazioni attuali.

Apri strumento — Generatore di trasformazioni CSS

Generatore di ombre CSS

Crea livelli box-shadow ordinati, visualizza l’anteprima e copia il codice CSS.

Apri strumento — Generatore di ombre CSS

Filigrana per immagini

Aggiungi testo o un logo alle immagini, controlla i risultati e scarica i singoli file o uno ZIP.

Apri strumento — Filigrana per immagini

Generatore di gradienti CSS

Crea gradienti lineari o radiali regolando colori, opacità e punti.

Apri strumento — Generatore di gradienti CSS

Convertitore colori

Converti valori sRGB HEX, RGB e HSL supportati con alfa e precisione esplicita.

Apri strumento — Convertitore colori

Immagine in testo (OCR)

Riconosci testo stampato in PNG o JPEG locali, scegli la lingua e controlla o correggi il risultato prima di copiarlo o scaricarlo.

Apri strumento — Immagine in testo (OCR)

Lettore di codici QR da immagine

Leggi un codice QR da un PNG o JPEG locale ed esamina testo o byte senza aprire link.

Apri strumento — Lettore di codici QR da immagine

Verifica contrasto colori

Confronta i colori di primo piano e sfondo, regola l’opacità e verifica le soglie numeriche WCAG per testo e dettagli essenziali dell’interfaccia.

Apri strumento — Verifica contrasto colori

Calcolatore dimensioni di stampa e risoluzione

Calcola le dimensioni di stampa, i pixel necessari e i PPI effettivi con bordi o ritaglio.

Apri strumento — Calcolatore dimensioni di stampa e risoluzione

Calcolatore del rapporto d’aspetto

Trova il rapporto tra larghezza e altezza o nuove dimensioni in pixel impostando un solo lato.

Apri strumento — Calcolatore del rapporto d’aspetto

Compressore immagini

Prova ad adattare un JPEG, PNG o WebP a una dimensione file desiderata, con risultati misurati e dimensioni riducibili.

Apri strumento — Compressore immagini

HEIC in JPG

Converti localmente le foto HEIC supportate in JPG a piena risoluzione, scegli qualità e sfondo e scarica i risultati verificati singolarmente o in ZIP.

Apri strumento — HEIC in JPG

Convertitore di immagini

Converti immagini PNG, JPEG e WebP in locale, imposta trasparenza, sfondo e qualità e scarica i risultati.

Apri strumento — Convertitore di immagini

Crea collage di foto

Disponi le foto locali in una griglia e scarica un PNG o JPEG.

Apri strumento — Crea collage di foto

Ruotare e riflettere immagini

Ruota o rifletti un gruppo locale di immagini statiche PNG, JPEG e WebP, poi controlla e scarica i risultati elaborati.

Apri strumento — Ruotare e riflettere immagini

Ritagliare immagini

Ritaglia un JPEG, PNG o WebP locale con precisione in pixel e scarica il risultato in PNG o JPEG.

Apri strumento — Ritagliare immagini

Ridimensionare immagini

Ridimensiona JPG, PNG o WebP in pixel o percentuale, controlla l’anteprima e scarica il risultato.

Apri strumento — Ridimensionare immagini

Vedi tutti gli strumenti di questa categoria

Impostazioni della griglia

Dimensioni

Spaziatura

Disposizione e allineamento

Dimensioni delle tracce

Colonne esplicite

Traccia 1

Traccia 2

Traccia 3

Righe esplicite

Traccia 1

Traccia 2

Schema delle colonne implicite

Traccia 1

Schema delle righe implicite

Traccia 1

Elementi nell’ordine del codice sorgente

Posizione nella colonna

Posizione nella riga

Codice generato

Usare il codice

Ordine visivo e ordine del codice sorgente

Dimensioni dell’anteprima

Direzioni della griglia

Dimensioni delle tracce

Elementi in ordine sorgente

Disposizione e allineamento

Crea una griglia

Come funzionano le regole

Esempi

Limiti dell’editor

Esempio locale

Domande su CSS Grid

1fr equivale a una percentuale?

Perché il contenuto fuoriesce?

Cosa cambia consentire meno del contenuto?

Da dove si contano le linee negative?

Perché un’area con nome viene rifiutata?

dense cambia l’ordine di lettura?

Cosa contiene l’HTML scaricato?

Strumenti correlati

Da SVG a PNG

Generatore di filtri CSS

Calcolatore della dimensione fluida del testo

Generatore di pulsanti CSS

Generatore CSS border-radius

Generatore CSS Flexbox

Generatore CSS di ombre del testo

Generatore di trasformazioni CSS

Generatore di ombre CSS

Filigrana per immagini

Generatore di gradienti CSS

Convertitore colori

Immagine in testo (OCR)

Lettore di codici QR da immagine

Verifica contrasto colori

Calcolatore dimensioni di stampa e risoluzione

Calcolatore del rapporto d’aspetto

Compressore immagini

HEIC in JPG

Convertitore di immagini

Crea collage di foto

Ruotare e riflettere immagini

Ritagliare immagini

Ridimensionare immagini