Puoi utilizzare CSS Grid, un layout bidimensionale, per creare contenuti web reattivi. Come utilizzare il layout della griglia CSS e puoi spostare facilmente le righe senza armeggiare con il codice HTML. Quando si tratta di dividere una pagina in aree chiave o di specificare la relazione tra i componenti di un controllo costruito da primitive HTML, CSS Grid Layout eccelle.
Il layout a griglia consente a un autore di allineare gli elementi in colonne e righe in modo simile a tabelle. Ma con la griglia CSS, molti più layout sono fattibili o più semplici di quanto non fossero con le tabelle. Ad esempio, come gli elementi posizionati in CSS, gli elementi figli di un contenitore di griglia potrebbero posizionarsi in modo da sovrapporsi e sovrapporsi effettivamente.
Come utilizzare il layout di griglia CSS
Creazione di un layout di griglia
Puoi trasformare qualsiasi elemento di layout (sezione, contenitore, blocco, div) in un layout di griglia CSS impostando il valore Display su griglia. Questo elemento è il tuo contenitore griglia. Ogni elemento figlio diretto del tuo contenitore Grid è un Elemento griglia, con impostazioni aggiuntive per Colonna griglia e Riga griglia per inserire un elemento all’interno del griglia.
Quando si modifica un contenitore della griglia nel builder, diventa visibile una sovrapposizione della griglia che indica le celle della griglia. Facendo clic sulla piccola icona di azione dell’elemento a quattro quadrati è possibile mostrare/nascondere questa sovrapposizione. Come puoi vedere nello screenshot sopra, gli elementi della griglia sono disposti in righe per impostazione predefinita, coprendo l’intera larghezza del contenitore della griglia. Che di per sé non sblocca il vero potere della griglia CSS, fino a quando non inizi.
Come usare la griglia CSS
Per questa illustrazione, devi creare un elemento div genitore ( il contenitore della griglia) e uno o più elementi div figlio per impostare un layout di griglia (gli elementi della griglia).
Gli elementi della griglia sono i figli diretti del contenitore della griglia. Sono disposti verticalmente in colonne e orizzontalmente in righe. Lo spazio tra una riga e una colonna è chiamato gap. Puoi regolare lo spazio utilizzando queste proprietà:
grid-column-gap, che definisce lo spazio tra le colonne; grid-row-gap, che definisce lo spazio tra le righe; o grid-gap, che è una proprietà abbreviata per grid-column-gap e grid-row-gap.
Quando dovresti usare CSS Grid?
Anche se puoi usare CSS Grid praticamente in qualsiasi aspetto dello sviluppo web, ci sono alcune situazioni in cui è l’ideale. Ad esempio, quando dobbiamo implementare un layout di progettazione complesso, CSS Grid è migliore della proprietà CSS float. Questo perché Grid è un layout bidimensionale (con colonne e righe), mentre la proprietà CSS float è un layout unidimensionale (con colonne o righe).
Grid è anche una buona scelta quando bisogno di uno spazio o spazio tra gli elementi. Utilizzando la proprietà CSS grid gap, la spaziatura di due elementi è molto più semplice rispetto all’utilizzo delle proprietà CSS margin e padding che potrebbero finire per complicare le cose.
Vantaggi di CSS Grid
CSS Grid è molto reattivo e flessibile. I layout in due dimensioni sono semplici da realizzare grazie ad esso. Inoltre semplice da usare, la maggior parte dei browser Web supporta CSS Grid. Con la griglia CSS, hai molta più flessibilità e un markup più pulito (nel tuo codice HTML).
Ciò è in parte dovuto al fatto che l’utilizzo della griglia CSS per modificare la posizione di un elemento non richiede la modifica del markup (codice HTML). Nel complesso, CSS Grid Layout ci consente di creare layout più complessi che combinano righe e colonne.
Domande frequenti
Come personalizzo la mia griglia CSS?
Imposta il contenitore della griglia e gli elementi della griglia. Una griglia CSS è costituita da tracce griglia orizzontali e verticali (righe e colonne). … Aggiungi grondaie. … Posizionare le celle della griglia. … Dimensioni delle celle della griglia. … Definire le aree della griglia con nome. … Crea griglie nidificate.
Va bene usare la griglia nei CSS?
Va bene per il mio layout usare le griglie CSS? SÌ. La decisione di utilizzare CSS Grid Layout, come con qualsiasi scelta di tecnologia front-end, dipenderà dai browser utilizzati dalla maggior parte dei visitatori del tuo sito.