CSS Grid è un sistema di layout bidimensionale basato su griglia che consente di creare layout di siti Web organizzati e flessibili. Pensatela come una griglia di colonne ed righe che puoi utilizzare per posizionare e organizzare gli elementi della pagina web. Tuttavia, a differenza delle tabelle HTML, i layout della griglia CSS sono controllati con CSS e non con markup HTML. Ciò rende CSS Grid estremamente flessibile per il web design reattivo.
Come funziona la griglia CSS Blocs
Quando si lavora con CSS Grid all'interno Blocs, è importante considerare che il layout Grid è costituito da due elementi principali, un contenitore della griglia principale e, nella maggior parte dei casi, più contenitori secondari interni.
Contenitore della griglia principale
Il contenitore della griglia principale è responsabile delle informazioni di layout principali. A questo elemento si applicano ad esempio il numero di colonne/righe e le rispettive dimensioni dello spazio vuoto.
Contenitore figlio della griglia
I contenitori secondari interni sono le caselle in cui normalmente inserisci gli elementi dell'interfaccia del tuo sito web. Per impostazione predefinita, questi contenitori sono impostati su flusso automatico (inseriti nella griglia), tuttavia, possono essere personalizzati utilizzando classi personalizzate per essere posizionati in un'ampia varietà di modi, all'interno del contenitore della griglia principale.
Puoi leggere ulteriori informazioni sul posizionamento dei contenitori secondari qui.
Aggiungi un contenitore di griglia
Puoi iniziare a utilizzare CSS Grid nel tuo Blocs progetto aggiungendo un contenitore CSS Grid utilizzando il file dedicato Bric.
O in alternativa, selezionando a Div Bric e impostando il suo Digitare al contenitore della griglia.
Il layout predefinito della griglia CSS in Blocs è due colonne per due righe. Quando il layout viene modificato in qualsiasi modo, ad esempio aggiungendo ulteriori colonne o righe, queste informazioni sul layout personalizzato vengono archiviate in una classe personalizzata che viene applicata automaticamente al contenitore CSS Grid.
Vale anche la pena notare che le colonne hanno una larghezza di 1fr e le righe hanno l'altezza impostata su auto per impostazione predefinita.
colonne
Le colonne sono le divisioni verticali dello spazio nel layout della griglia CSS, sono particolarmente utili per guidare l'occhio dello spettatore, ottimizzare la leggibilità e utilizzare in modo efficiente lo spazio.
Aggiungi una colonna
È possibile aggiungere ulteriori colonne a un contenitore Griglia CSS facendo clic sul pulsante più + situato nell'angolo in alto a destra dei controlli di selezione della griglia.
Rimuovere una colonna
Le colonne possono essere rimosse da un contenitore della griglia CSS facendo clic sul pulsante del cestino situato in alto a sinistra del controller della larghezza della colonna.
Quando il numero di colonne or righe è personalizzato, se non ci sono abbastanza contenitori figli per visualizzare correttamente il layout, Blocs li inserirà automaticamente nel contenitore della griglia CSS.
È anche importante ricordare che CSS Grid utilizza CSS puro per controllare il layout, il che significa che le colonne possono essere aggiunte e rimosse per punto di interruzione.
Larghezza colonna
Per impostazione predefinita, la larghezza di una colonna è impostata su 1fr sui contenitori CSS Grid all'interno Blocs. fr unità sta per frazione. Rappresenta una frazione dello spazio disponibile nel contenitore della griglia.
Se utilizzato per la larghezza della colonna, 1fr significa che la colonna occuperà una frazione dello spazio totale disponibile. Se più colonne utilizzano il file fr unità, lo spazio viene diviso in base al valore di frazione di ciascuna colonna rispetto alla somma dei valori di frazione di tutte le colonne.
La larghezza di una colonna può essere regolata per punto di interruzione utilizzando la maniglia di ridimensionamento presente sul controllo della larghezza della colonna. Trascinando questa maniglia a sinistra or destra regolerà il fr valore per la colonna correlata in incrementi di 0.5.
Spazio tra le colonne
È possibile impostare la spaziatura tra colonne su ogni punto di interruzione trascinando lo spazio vuoto tra le colonne all'interno del contenitore della griglia sull'area di disegno.
Puoi anche reimpostare la misurazione del gap tra le colonne di un contenitore CSS Grid tramite clic destro nello spazio tra le colonne e selezionando Reimposta larghezza.
Righe
Le righe sono le divisioni orizzontali dello spazio nel layout della griglia CSS, assicurano che il contenuto scorra in modo logico e mantenga l'allineamento visivo.
Aggiungi una riga
È possibile aggiungere ulteriori righe a un contenitore della griglia CSS facendo clic sul pulsante più + situato nell'angolo in basso a sinistra dei controlli di selezione della griglia.
Le righe funzionano in modo leggermente diverso dalle colonne, sebbene sia possibile aggiungere più righe, in genere il numero di righe viene calcolato e regolato automaticamente in base al numero di colonne e contenitori secondari all'interno del contenitore della griglia principale.
Rimuovi una riga
Il processo di rimozione delle righe è leggermente diverso da quello delle colonne. È possibile rimuovere righe solo quando è presente un numero negativo di contenitori figlio rispetto al numero di righe nel layout della griglia.
Quando il conteggio dei contenitori secondari per una riga è negativo, verrà visualizzato un pulsante del cestino sul bordo superiore del controllo dell'altezza della riga (che non contiene contenitori secondari). Facendo clic su questo pulsante verrà rimossa la riga.
Altezza della riga
L'altezza predefinita di una riga è impostata su auto sui contenitori CSS Grid all'interno Blocs. auto unit essenzialmente dice alla griglia di determinare automaticamente l'altezza di quella riga in base al suo contenuto. In altre parole, la riga sarà alta quanto il contenuto più alto all'interno dei contenitori secondari della griglia di quella riga.
L'altezza di una colonna può essere regolata per punto di interruzione utilizzando la maniglia di ridimensionamento presente sul controllo dell'altezza della riga. Trascinando questa maniglia up or giù regolerà l'altezza della riga in pixels.
Sebbene questa opzione sia disponibile, se ne consiglia l'utilizzo auto per le altezze delle file, poiché è più flessibile per quanto riguarda la reattività del layout.
Spazio tra righe
È possibile impostare la spaziatura tra righe su ciascun punto di interruzione trascinando lo spazio vuoto tra le righe all'interno del contenitore Griglia CSS nell'area di disegno.
Puoi anche reimpostare la misurazione dello spazio tra le righe di un contenitore CSS Grid tramite clic destro nello spazio tra le colonne e selezionando Reimposta altezza.
Posizionamento dei contenitori secondari
Per impostazione predefinita, questi contenitori sono impostati su flusso automatico (fit into the grid), tuttavia, possono essere personalizzati in modo indipendente utilizzando classi personalizzate, in modo da essere posizionati all'interno del contenitore della griglia genitore.
Per personalizzare il modo in cui un contenitore figlio della griglia viene posizionato all'interno della griglia, devi prima selezionarlo e applicare una classe personalizzata.
Usando il Editor di classi, è ora possibile applicare valori al file Elemento della griglia regole per il contenitore figlio selezionato per posizionarlo, nel rispettivo contenitore padre della griglia CSS.
Inizio colonna
I inizio-colonna-griglia La proprietà viene utilizzata per indicare la linea della griglia di colonna in cui inizia un elemento della griglia in un layout di griglia.
Fine colonna
I griglia-colonna-fine La proprietà viene utilizzata per indicare quante colonne si estenderà un elemento o la linea della griglia di colonne in cui un elemento della griglia termina in un layout di griglia.
Inizio riga
I griglia-riga-inizio La proprietà viene utilizzata per indicare la linea della griglia in cui inizia un elemento della griglia in un layout di griglia.
Fine riga
I fine riga della griglia La proprietà viene utilizzata per indicare quante righe si estenderà un elemento o la linea di riga in cui termina un elemento della griglia in un layout di griglia.
Tecniche di posizionamento
Utilizzando le proprietà inizio colonna, fine colonna, inizio riga e fine riga, è possibile posizionare i contenitori secondari all'interno del contenitore principale della griglia CSS. Ecco alcuni esempi comuni di tecniche di posizionamento dei figli della griglia.
Tutti gli esempi qui riportati possono essere esaminati ulteriormente in questo Blocs progetto di esempio.
Colonne di estensione
Per estendere un contenitore figlio della griglia su un numero di colonne, applica una classe al contenitore figlio e quindi imposta il file Elementi griglia > Colonna > Fine valore del campo a campata seguito dal numero di colonne su cui desideri suddividere il bambino.
Righe estese
Per estendere un contenitore figlio della griglia su un numero di righe, applica una classe al contenitore figlio e quindi imposta il file Elementi griglia > Riga > Fine valore del campo a campata seguito dal numero di righe su cui desideri distribuire il bambino.
Cambia posizione orizzontale
In questo esempio, il contenitore figlio viola è originariamente nella prima posizione orizzontale nella griglia, utilizzando una classe personalizzata viene spostato direttamente nella seconda posizione orizzontale o nella seconda colonna.
Per posizionare orizzontalmente un contenitore figlio della griglia, applicare una classe al contenitore figlio e quindi impostare il file Elementi griglia > Colonna > Inizio valore del campo sul numero di colonna in cui desideri posizionarlo. È anche importante impostare il file Elementi della griglia > Riga > Inizio valore del campo al numero di riga in cui desideri che rimanga.
Cambia posizione verticale
In questo esempio, il contenitore figlio viola è originariamente nella prima posizione verticale nella griglia, utilizzando una classe personalizzata viene spostato nella seconda posizione verticale.
Per posizionare verticalmente un contenitore figlio della griglia, applicare una classe al contenitore figlio e quindi impostare il file Elementi della griglia > Riga > Inizio valore del campo al numero di riga in cui desideri posizionarlo.
Quando si posizionano i contenitori secondari della griglia, è importante considerare che ad altri contenitori secondari nella griglia potrebbero essere applicate regole di posizionamento delle classi in conflitto, il che potrebbe creare errori di layout indesiderati. Fai attenzione a mantenere le classi della griglia organizzate per evitare confusione durante la creazione con CSS Grid.
Letture consigliate
Questo articolo è destinato ai principianti che stanno muovendo i primi passi con CSS Grid, se cerchi informazioni più approfondite e avanzate su CSS Grid ti consigliamo di leggere questa guida introduttiva su Griglia CSS da Trucchi CSS.