CSS Grid Box Container

Vediamo insieme come funziona il contenitore di un CSS Grid Box Layout che chiameremo semplicemente CSS Grid Box Container.
Innanzitutto come detto nel precedente articolo esso deve possedere la proprietà display:grid.

I tipologie di griglia possono essere:

  1. grid, griglia in blocco-
  2. inline-grid, griglia inline
  3. subgrid, griglia sub-annidata

Poi abbiamo grid-template-columns e grid-template-rows i quali definiscono i livelli di separazione tra le colonne e le righe, se li usiamo entrambi si parla di griglia bidimensionale se ne usiamo uno soltato si parla di griglia monodimensionale, questi possono essere specificati in percentuali o frazioni(dicitura fr) a livello di colonna o riga.
Un esempio vi aiuterà a comprendere a colpo d’occhio, seppur intrecciato 🙂

.container {
  display:grid;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Uso di grid-template-column e grid-template-rows

Esempio grid-template-columns e grid-template-rows


Le grid-template-columns e grid-template-rows possono essere ulteriormente estese assegnando dei veri e propri nomi alle aree (fantascientifico, ma troppo avanzato) per ora sorvoliamo sulla proprietà grid-template-areas.

grid-template-rows, grid-template-columnse e grid-template-areas posso inoltre essere dichiarate in unica proprietà CSS utilizzando grid-template.

.container {
  display:grid;
  grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}

Molto interessanti sono invece le proprietà grid-column-gap e grid-row-gap le quali definiscono gli spazi della Grid Line(si rimanda qua per capire cosa è una grid line).
Queste specificano le dimensioni delle linee della griglia. Si può pensare a tali linee a come delle grondaie che separano colonne e/o righe. Dall’esempio sarà tutto molto chiaro 🙂

.container {
  display:grid;
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

grid gap CSS Grid Box Container

Esempio di grid gap per il CSS Grid Box Container


Come per grid-template-columns e grid-template-rows, i gaps possono essere a loro volta specificati in unica regola utilizzando grid-gap (sintassi grid-gap: ;). Pertanto la regola precedente si tramuta in grid-gap: 10px 15px;.

Vediamo rapidamente alcune regole definibili sul CSS Grid Box Container per quanto riguarda gli allineamenti.

1)justify-items, allinea il contenuto all’interno di un elemento della griglia lungo l’ asse della riga, esso accetta i seguenti valori:

  • start: I grid item vengono allineati all’estremità sinistra della griglia (all’inizio).
  • end: I grid item vengono allineati all’estremità destra della griglia (alla fine).
  • center: I grid item vengono allineati al centro sull’asse orizzontale del loro contenitore padre.
  • stretch: I grid item riempiono in larghezza tutto il box che li contenie.

Questo comportamento può anche essere impostato anche sui singoli elementi della griglia tramite la proprietà justify-self, che permette per quello specifico figlio un compartamento diverso da quanto specificato dal suo contenitore papà.

2)align-items, allinea il contenuto all’interno di un elemento della griglia lungo l’asse della colonna, esso accetta i seguenti valori:

  • start: I grid item vengono allineati all’estremità superiore della griglia (in alto).
  • end: I grid item vengono allineati all’estremità inferiore della griglia (in basso).
  • center: I grid item vengono allineati al centro sull’asse verticale del loro contenitore padre.
  • stretch: I grid item riempiono in altezza tutto il box che li contiene.

Questo comportamento può anche essere impostato anche sui singoli elementi della griglia tramite la proprietà align-self, che permette per quello specifico figlio un compartamento diverso da quanto specificato dal suo contenitore papà.

3)justify-content, utile se la griglia non occupa in larghezza tutto lo spazio del contenitore che lo ospita in tal caso si può decidere se allineare la griglia a destra, sinistra ecc..non a caso justify-content può assumere :

  • start: allinea la griglia all’estremità sinistra del suo contenitore padre.
  • end: allinea la griglia all’estremità destra del suo contenitore padre.
  • center: allinea la griglia al centro del suo contenitore padre.
  • stretch: stretcha tutta la grigia affinché occupi in larghezza il 100% del contenitore padre.
  • space-around: posiziona una quantità di spazio uguale tra ogni elemento della griglia, sull’asse delle X.
  • space-between: posiziona una quantità di spazio uguale tra ogni elemento della griglia, senza spazio alle estremità laterali, cosa non rispettata da space-around
  • space-evenly: posiziona una quantità di spazio uguale tra ogni elemento della griglia, comprese le estremità della griglia, cosa non rispettata da space-between

4)align-content, utile se la griglia non occupa in altezza tutto lo spazio del contenitore che lo ospita in tal caso si può decidere se allineare la griglia in alto, in basso, ecc..non a caso align-content può assumere :

  • start: allinea la griglia all’estremità superiore del suo contenitore padre.
  • end: allinea la griglia all’estremità inferiore del suo contenitore padre.
  • center: allinea la griglia al centro del suo contenitore padre.
  • stretch: stretcha tutta la grigia affinchè occupi in altezza il 100% del contenitore padre.
  • space-around: posiziona una quantità di spazio uguale tra ogni elemento della griglia, sull’asse delle Y.
  • space-between: posiziona una quantità di spazio uguale tra ogni elemento della griglia, senza spazio agli antipodi inferiore/superiore, cosa non rispettata da space-around
  • space-evenly: posiziona una quantità di spazio uguale tra ogni elemento della griglia, compresi gli antipodi della griglia, cosa non rispettata da space-between

Per concludere le proprietà del CSS Grid Box Container vi sarebbero anche grid-auto-columns e grid-auto-rows, che permettono di alterare l’algoritmo di default del CSS Grid Box Container per il quale vi rimando a questa rapida guida del W3C non essendo io ancora maturo su questa tecnologia abbastanza ampia per trattare questo argomento leggermente più complesso.

Dopo aver studiato le proprietà del CSS Grid Box Container passiamo ad analizzare i suoi diretti discendenti: https://www.gianlucadivincenzo.it/css/css-grid-box-layout/.

CSS Grid Box Container ultima modidfica: 2018-01-31T21:56:52+01:00 da Gianluca Di Vincenzo