Informazioni su questo strumento
CSS Grid Generator è uno strumento gratuito che funziona nel browser e trasforma tre semplici controlli — numero di colonne, numero di righe e gap — in un layout a griglia CSS pronto da incollare. Imposta i valori, guarda l'anteprima ridisegnarsi in tempo reale e copia la regola generata.
Colonne e righe sono numeri interi da 1 a 12 (con valori predefiniti 3 e 2), e il gap è un cursore da 0 a 40 pixel (predefinito 10). Entrambe le dimensioni vengono scritte con repeat() e l'unità 1fr, così ogni traccia condivide equamente lo spazio disponibile. L'anteprima riempie ogni cella con un blocco numerato e colorato così puoi vedere la struttura delle tracce a colpo d'occhio, e l'output è una semplice regola .grid che usa display: grid, grid-template-columns, grid-template-rows e gap. Un clic la copia nei tuoi appunti.
Tutto avviene interamente nel tuo browser — nessun caricamento, nessun account, nessun tracciamento — e continua a funzionare offline una volta caricata la pagina.