Generatore CSS Grid
Generatore layout CSS Grid gratuito online, editor visuale
Nozioni di base su CSS Grid Layout
CSS Grid è un sistema di layout bidimensionale per disporre elementi in righe e colonne. Proprietà principali: grid-template-columns definisce le tracce delle colonne, grid-template-rows definisce le tracce delle righe, gap controlla la spaziatura e grid-area posiziona gli elementi. Grid eccelle nei layout a livello di pagina.
Come usare il generatore Grid
Imposta il numero di colonne e righe. L'anteprima mostra il layout della griglia. Regola le dimensioni e gli spazi. Copia il codice CSS generato per il tuo progetto.
▶Quando dovrei usare Grid invece di Flexbox?
Usa Grid per layout bidimensionali (righe E colonne contemporaneamente). Usa Flexbox per layout unidimensionali (una riga O una colonna). Grid è migliore per i layout di pagina; Flexbox è migliore per i layout di componenti.
▶Cos'è l'unità fr in CSS Grid?
fr (frazione) è un'unità flessibile che distribuisce lo spazio rimanente. grid-template-columns: 1fr 2fr assegna alla seconda colonna il doppio dello spazio della prima. È simile a flex-grow in Flexbox.
▶Gli elementi Grid possono occupare più celle?
Sì. Usa grid-column: span 2 o grid-row: span 2 per far occupare a un elemento più colonne o righe. Puoi anche usare grid area con nome per layout complessi.