Generatore di CSS Grid
Definisca colonne e righe, trascini il mouse sulle celle per posizionare gli elementi e copi il codice CSS e HTML corrispondente con un solo clic.
La griglia viene creata direttamente nel Suo browser. Nessun dato impostato viene caricato su BroBroGo.
FAQ
Come posso posizionare gli elementi sulla griglia?
Prema e trascini il mouse sulle celle per tracciare un rettangolo: al rilascio, questo diventerà un elemento posizionato che si estende su quelle colonne e righe. Ogni elemento disegnato riceve una regola grid-column e grid-row dedicata nel codice CSS e un div corrispondente nell'HTML. Gli elementi possono sovrapporsi (l'ultimo disegnato apparirà sopra gli altri); usi la "×" su un elemento per rimuoverlo.
Le colonne e le righe possono avere dimensioni differenti?
Sì. Ogni traccia ha il proprio campo di inserimento per la dimensione, dove può digitare qualsiasi valore valido per le griglie, come 1fr, 200px, auto, min-content o minmax(120px, 1fr). Le tracce che condividono la stessa dimensione vengono raggruppate nella funzione repeat() per mantenere il codice pulito. Lo spazio tra colonne (column-gap) e tra righe (row-gap) si imposta separatamente e si riduce a un'unica proprietà gap quando i valori coincidono.
Cosa devo fare con il codice generato?
Copi il codice CSS e HTML. L'HTML fornisce la struttura del contenitore con un div per ogni elemento, mentre il CSS definisce la griglia e posiziona ciascun elemento. Incollando entrambi nel Suo progetto otterrà esattamente il layout disegnato.