Grid Layout in CSS

Il Grid Layout offre un sistema di layout basato su griglia, con righe e colonne, semplificando la progettazione di pagine web senza dover utilizzare float e posizionamenti.

Proprietà Display Grid

Un elemento HTML diventa un contenitore a griglia quando la sua proprietà di visualizzazione viene impostata su grid o inline-grid.

.grid-container {
  display: grid | inline-grid;
}

Tutti i figli diretti del contenitore a griglia diventano automaticamente elementi di griglia.

Spaziatura nella Griglia

Gli spazi tra ciascuna colonna/riga sono chiamati gap.

Puoi regolare la dimensione del gap utilizzando una delle seguenti proprietà:

• column-gap
• row-gap
• gap

La proprietà column-gap imposta lo spazio tra le colonne:

.grid-container {
  display: grid;
  column-gap: 50px;
}

La proprietà row-gap imposta lo spazio tra le righe:

.grid-container {
  display: grid;
  row-gap: 50px;
}

La proprietà gap è una proprietà abbreviata per le proprietà row-gap e column-gap:

.grid-container {
  display: grid;
  gap: 50px 100px;
}

La proprietà gap può essere utilizzata anche per impostare sia lo spazio tra le righe che tra le colonne in un unico valore:

.grid-container {
  display: grid;
  gap: 50px;
}

Linee della Griglia

Le linee tra le colonne sono chiamate linee di colonna, mentre le linee tra le righe sono chiamate linee di riga.

Riferisci al numero di linea quando posizioni un elemento di griglia in un contenitore di griglia:

Posiziona un elemento di griglia alla colonna di linea 1 e lascialo terminare alla colonna di linea 3:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Posiziona un elemento di griglia alla riga di linea 1 e lascialo terminare alla riga di linea 3:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Contenitore della Griglia

Per fare in modo che un elemento HTML si comporti come un contenitore di griglia, è necessario impostare la proprietà di visualizzazione su grid o inline-grid.

I contenitori di griglia sono composti da elementi di griglia, posizionati all’interno di colonne e righe.

La Proprietà grid-template-columns

La proprietà grid-template-columns definisce il numero di colonne nel tuo layout a griglia e può definire la larghezza di ciascuna colonna.

Il valore è una lista separata da spazi, in cui ogni valore definisce la larghezza della rispettiva colonna.

Se desideri che il tuo layout a griglia contenga 4 colonne, specifica la larghezza delle 4 colonne o “auto” se tutte le colonne dovrebbero avere la stessa larghezza.

Crea una griglia con 4 colonne:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Nota che se hai più di 4 elementi in una griglia a 4 colonne, la griglia aggiungerà automaticamente una nuova riga per posizionare gli elementi.

La proprietà grid-template-columns può anche essere utilizzata per specificare la larghezza delle colonne.

Imposta una dimensione per le 4 colonne:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

La Proprietà grid-template-rows

La proprietà grid-template-rows definisce l’altezza di ogni riga.

Il valore è una lista separata da spazi, in cui ogni valore definisce l’altezza della rispettiva riga:

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

La Proprietà justify-content

La proprietà justify-content viene utilizzata per allineare l’intera griglia all’interno del contenitore.

La larghezza totale della griglia deve essere inferiore alla larghezza del contenitore affinché la proprietà justify-content abbia effetto.

.grid-container {
  display: grid;
  justify-content: space-evenly | space-around | space-between | center | start
    | end;
}

La Proprietà align-content

La proprietà align-content viene utilizzata per allineare verticalmente l’intera griglia all’interno del contenitore. L’altezza totale della griglia deve essere inferiore all’altezza del contenitore affinché la proprietà align-content abbia effetto.

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly | space-around | space-between | center | start |
    end;
}

Elementi Celle

Un contenitore a griglia contiene elementi di griglia o celle.

Per impostazione predefinita, un contenitore ha un elemento di griglia per ogni colonna, in ogni riga, ma è possibile stilizzare gli elementi di griglia in modo che si estendano su più colonne e/o righe.

La Proprietà grid-column:

La proprietà grid-column definisce su quale/i colonna/e posizionare un elemento. La proprietà grid-column è una proprietà abbreviata per le proprietà grid-column-start e grid-column-end.

Si definisce dove inizia l’elemento e dove finisce l’elemento.

Per posizionare un elemento, puoi fare riferimento ai numeri di linea o utilizzare la parola chiave “span” per definire quante colonne l’elemento occuperà.

Fai iniziare “item1” dalla prima colonna e finisci prima della colonna di linea 5:

.item1 {
  grid-column: 1 / 5;
}

Fai iniziare “item1” dalla prima colonna e occupa 3 colonne:

.item1 {
  grid-column: 1 / span 3;
}

Fai iniziare “item2” dalla seconda colonna e occupa 3 colonne:

.item2 {
  grid-column: 2 / span 3;
}

La Proprietà grid-row:

La proprietà grid-row definisce su quale riga posizionare un elemento. La proprietà grid-row è una proprietà abbreviata per le proprietà grid-row-start e grid-row-end.

Si definisce dove inizia l’elemento e dove finisce l’elemento.

Per posizionare un elemento, puoi fare riferimento ai numeri di linea o utilizzare la parola chiave “span” per definire quante righe l’elemento occuperà:

Fai iniziare “item1” alla prima riga finisci alla linea di riga 4:

.item1 {
  grid-row: 1 / 4;
}

Fai iniziare “item1” alla riga 1 e occupa 2 righe:

.item1 {
  grid-row: 1 / span 2;
}

La Proprietà grid-area

La proprietà grid-area può essere utilizzata come proprietà abbreviata per le proprietà grid-row-start, grid-column-start, grid-row-end e grid-column-end.

Fai iniziare “item8” alla linea di riga 1 e alla colonna di linea 2, e finisci alla linea di riga 5 e alla colonna di linea 6:

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

Fai iniziare “item8” alla linea di riga 2 e alla colonna di linea 1, e occupa 2 righe e 3 colonne:

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

Nominare gli Elementi della Griglia

La proprietà grid-area può anche essere utilizzata per assegnare nomi agli elementi di griglia.

Gli elementi di griglia con nomi possono essere riferiti dalla proprietà grid-template-areas del contenitore di griglia.

L’elemento Item1 ottiene il nome “Area” e occupa tutte e cinque le colonne in un layout a cinque colonne:

.item1 {
  grid-area: Area;
}
.grid-container {
  grid-template-areas: "Area Area Area Area Area";
}

Le colonne in ciascuna riga sono definite all’interno degli apici, separate da uno spazio.

Nota che un punto rappresenta un elemento di griglia senza nome.

.item1 {
  grid-area: Area;
}
.grid-container {
  grid-template-areas: "Area Area . . .";
}

Per definire due righe, definisci la colonna della seconda riga all’interno di un altro set di apici:

.grid-container {
  grid-template-areas: "Area Area . . ." "Area Area . . .";
}

Assegna nomi a tutti gli elementi e crea un modello di pagina web pronto all’uso:

.item1 {
  grid-area: header;
}
.item2 {
  grid-area: menu;
}
.item3 {
  grid-area: main;
}
.item4 {
  grid-area: right;
}
.item5 {
  grid-area: footer;
}

.grid-container {
  grid-template-areas:
    "header header header header header header"
    "menu main main main right right"
    "menu footer footer footer footer footer";
}