Guida completa per il layout Grid

Il layout Grid è disponibile con il nuovo standard CSS3. Questo layout a differenza del layout Flexbox che gestisce solo una dimensione, riesce a gestire sia le colonne sia le righe, rendendolo quindi capace di modificare entrambe le dimensioni.

Cosa significa il layout Grid

L'uso principale del CSS è di dare struttura alle pagine web usando gli elementi HTML. Si è cominciato usando le tabelle, poi il floating dei div e molto altro. Il problema è che nessuno di questi strumenti è stato duraturo e compatibile nel tempo con l'evoluzione dei browser. Il Layout Flexbox potrebbe essere una soluzione, ma è utile solo per una dimensione. Può essere usato per dare struttura alla pagina in verticale o in orizzontale ma è difficile farlo per entrambe le dimensioni.

Qui arriva in aiuto il Layout Grid, che è stato pensato per gestire entrambe le dimensioni. L'uso congiunto del layout Grid con il layout Flexbox può essere molto utile specialmente per gli schermi di piccole dimensioni, quali tablet e mobile.

Supporto dei browser per il layout Grid

Purtroppo il supporto non è completo. Solo le ultime versioni dei vari browser supportano questa proprietà. Pensate che nel momento in cui ho scritto questa guida il browser installato, non supportava questo layout. Ho dovuto aggiornare all'ultima versione per vedere le modifiche. Se non riuscite a vedere bene gli esempi qui sotto, probabilmente il vostro browser non è aggiornato oppure non supporta questo layout.

Desktop
Google Chrome Mozilla Firefox Internet Explorer Opera Apple Safari
57 52 10* 44 10

* Internet Explorer 10 e 11 supportano il layout Grid, ma con una vecchia implementazione e sintassi non aggiornata

Mobile / Tablet
iOS Safari Android Opera Mobile Android Chrome Android Firefox
10 No No 57 52

Come usare il layout Grid

Per usare questo layout, bisogna capire com'è formato questo layout. Visivamente è molto simile a una tabella e un pò ricalca gli elementi di una tabella ma definiti dal CSS e non da TAG particolari HTML. Gli elementi che andremo a definire sono alcuni fisici e alcuni concettuali. Abbiamo:

  1. Un contenitore/parente, al quale s'impostano le dimensioni delle colonne e righe, che può essere un DIV con associato del CSS.
  2. Degli elementi/figli, che vanno inseriti dentro il contenitore Grid, come nel caso del contenitore anche gli elementi figli possono essere degli DIV con assocato del CSS.
  3. Le linee del Grid, che sono le linee che suddividono gli elementi/figli del Grid, sono elementi concettuali, corrispondono agli spazzi tra gli elementi stessi.
  4. I track del Grid, che sono lo spazio tra due linee adiacenti, possono essere intese come colonne oppure come righe, sono anch'essi elementi concettuali e corrispondono a un insieme di elementi/figli.
  5. Una cella del Grid, che è lo spazio tra due linee adiacenti di colonna e due linee adiacenti di riga, anche questo è un elemento concettuale, corrisponde a un elemento/figlio racchiuso tra le linee.
  6. Un'area del Grid, è l'insieme di celle del Grid adiacenti.

Proprietà per il contenitore/parente Grid:

  • display

    Definisce l'elemento come contenitore Grid e stabilisce la formatazione per gli elementi che contiene.

    .contenitore {
        display: grid; /* || inline-grid || subgrid */
    }
    dove:

    • grid: genera un grid con disposizione block.

    • inline-grid: genera un grid con disposizione inline.

    • subgrid: genera un grid che è a sua volta figlio di un grid da cui eredita le dimensioni delle righe/colonne definite dal parente.
  • grid-template-columns, grid-template-rows

    Definisce le colonne e righe del grid con una lista di valori separati da spazi. I valori rappresentano la dimensione del track e lo spazio tra di loro rapresenta la linea del grid.

    .contenitore {
        grid-template-columns: auto /* || dimensione-track || nome-linea dimensione-track ... */;
        grid-template-rows: auto /* || dimensione-track || nome-linea dimensione-track ... */;
    }
    .contenitore{
        grid-template-columns: 10% 15% auto 15% 10%;
        grid-template-rows: 25% 10% auto;
    }

    Si possono nominare le linee con parentesi quadre:

    .contenitore{
        grid-template-columns: [iniz-col] 10% [col-2] 15% [col-3] auto [col-4] 15% [col-5] 10% [fin-col];
        grid-template-rows: [iniz-rig] 25% [rig-2] 15% [rig-3] auto [fin-rig];
    }

    Una linea può avere più di un nome.

    .contenitore{
        grid-template-rows: [iniz-riga] 25% [riga-1-fine riga-2-inizio] 25% [fine-rig];
    }

    Esempio:

    <div style='
    	display: grid; 
    	grid-template-columns: [iniz-col] 10% [col-2] 15% [col-3] auto [col-4] 15% [col-5] 10% [fin-col];
    	grid-template-rows: [iniz-rig] 25% [rig-2] 15% [rig-3] auto [fin-rig];'>
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    
    	<div>6</div>
    	<div>7</div>
    	<div>8</div>
    	<div>9</div>
    	<div>10</div>
    
    	<div>11</div>
    	<div>12</div>
    	<div>13</div>
    	<div>14</div>
    	<div>15</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    Se la struttura della vostra pagina contiene ripetizioni per gli elementi figli, si può usare la notazione repeat():

    Esempio:

    <div style='
    	display: grid;
    	grid-template-columns: 15% repeat(3, 25% [col-start]) 10%;
    	grid-template-rows: [iniz-rig] 25% [rig-2] 15% [rig-3] auto [fin-rig];'>
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    	<div>5</div>
    
    	<div>6</div>
    	<div>7</div>
    	<div>8</div>
    	<div>9</div>
    	<div>10</div>
    
    	<div>11</div>
    	<div>12</div>
    	<div>13</div>
    	<div>14</div>
    	<div>15</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
  • grid-template-areas

    Si definisce il template del grid riferendosi alle aree del grid, che sono specificate dalla proprietà grid-area. Ripetere il nome di un area di grid fa si che il contenuto di queste celle si espanda. Attraverso la sintassi si può avere una "visualizzazione" della struttura del grid

    .contenitore{
        grid-template-areas: none; /* || nome-area-grid || . */;
    }
    dove:

    • nome-area-grid: è il nome dell'area del grid specificata da grid-area.

    • .: un punto significa una cella del grid vuota.

    • none: nessuna area del grid definita.

    Creiamo un grid con quattro colonne e tre rige. La riga iniziale sara composta da un unico header. La riga centrale avra un area main, una cella vuota e un area sidebar. L'ultima colonna è il footer.


    Esempio:

    <div style='
    	display: grid;
    	grid-template-columns: 25% 25% 25% 25%;
    	grid-template-rows: auto;
    	grid-template-areas: 
    	"header header header header"
    	"main main . sidebar"
    	"footer footer footer footer"' class='contenitore c-grid'>
    	<div style='grid-area: header'>header</div>
    	<div style='grid-area: main'>main</div>
    	<div style='grid-area: sidebar'>sidebar</div>
    	<div style='grid-area: footer'>footer</div>
    </div>
    header
    main
    sidebar
    footer
  • grid-template

    Abbreviazione per impostare grid-template-rows, grid-template-columns, e grid-template-areas in un unica dichiarazione.

    .contenitore{
        grid-template: none /* || subgrid || grid-template-rows / grid-template-columns */;
    }
    dove:

    • none: imposta le tre proprietà al loro valore iniziale.

    • subgrid: imposta grid-template-rows e grid-template-columns su subgrid, e grid-template-areas al suo valore iniziale.

    • grid-template-rows / grid-template-columns: imposta grid-template-columns e grid-template-rows nei valori specificati, rispettivamente, e imposta grid-template-areas a none.

    Si può specificare una sintassi più complessa ma più utile dove si specificano i tre paramteri contemporaneamente, l'esempio di sopra si convertirebbe in:

    Esempio:

    <div style='
    	display: grid;
    	grid-template:
    		"header header header header" auto
    		"main main . sidebar" auto
    		"footer footer footer footer" auto
    		/ 25% 25% 25% 25%'>
    	<div style='grid-area: header'>header</div>
    	<div style='grid-area: main'>main</div>
    	<div style='grid-area: sidebar'>sidebar</div>
    	<div style='grid-area: footer'>footer</div>
    </div>
    header
    main
    sidebar
    footer
  • grid-column-gap, grid-row-gap

    Definisce la dimensione delle linee del grid. Corrispondono allo spazio che si imposta tra le colonne o le righe.

    .contenitore{
        grid-row-gap: dimensione-linea;
        grid-column-gap: dimensione-linea;
    }
    dove:

    • dimensione-linea: è un valore di dimensione: px, %, em ...

    Lo spazio si crea solo tra le colonne e le righe, non tra i margini dell'elemento.

    Esempio:

    <div style='
    	display: grid;
    	grid-template-columns: 25% auto 25%;
    	grid-template-rows: 20% 30% auto; 
    	grid-row-gap: 5px;
    	grid-column-gap: 15px;'>
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    
    	<div>4</div>
    	<div>5</div>
    	<div>6</div>
    
    	<div>7</div>
    	<div>8</div>
    	<div>9</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
  • grid-gap

    Abbreviazione per grid-row-gap e grid-column-gap

    .contenitore{
        grid-gap: /* grid-row-gap grid-column-gap */;
    }
    dove:

    • grid-row-gap grid-column-gap: sono i valori di dimensione per riga e colonna in: px, %, em ...

    Lo spazio si crea solo tra le colonne e le righe, non tra i margini dell'elemento.

    Esempio:

    <div style='
    	display: grid;
    	grid-template-columns: 25% auto 25%;
    	grid-template-rows: 20% 30% auto; 
    	grid-gap: 5px 15px;'>
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    
    	<div>4</div>
    	<div>5</div>
    	<div>6</div>
    
    	<div>7</div>
    	<div>8</div>
    	<div>9</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
  • justify-items

    Allinea il contenuto dentro un grid relativo agli assi verticali, si applica a tutti gli elementi del grid.

    .contenitore{
        justify-items: stretch /* || start || end || center  */;
    }
    dove:

    • stretch (default): riempie tutto il width dell'elemento

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto;
      	grid-template-rows: auto auto; 
      	justify-items: stretch;'>
      	<div>1</div>
      	<div>2</div>
      
      	<div>3</div>
      	<div>4</div>
      </div>
      1
      2
      3
      4

    • start: allinea il contenuto a sinistra

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto;
      	grid-template-rows: auto auto; 
      	justify-items: start;'>
      	<div>1</div>
      	<div>2</div>
      
      	<div>3</div>
      	<div>4</div>
      </div>
      1
      2
      3
      4

    • end: allinea il contenuto a destra

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto;
      	grid-template-rows: auto auto; 
      	justify-items: end;'>
      	<div>1</div>
      	<div>2</div>
      
      	<div>3</div>
      	<div>4</div>
      </div>
      1
      2
      3
      4

    • center: allinea il contenuto al centro

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto;
      	grid-template-rows: auto auto; 
      	justify-items: center;'>
      	<div>1</div>
      	<div>2</div>
      
      	<div>3</div>
      	<div>4</div>
      </div>
      1
      2
      3
      4
  • align-items

    Allinea il contenuto dentro un grid relativo agli assi orizzontali, si applica a tutti gli elementi del grid.

    .contenitore{
        align-items: stretch /* || start || end || center  */;
    }
    dove:

    • stretch (default): riempie tutto il height dell'elemento

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto;
      	grid-template-rows: auto auto; 
      	align-items: stretch;'>
      	<div>1</div>
      	<div>2</div>
      
      	<div>3</div>
      	<div>4</div>
      </div>
      1
      2
      3
      4

    • start: allinea il contenuto verso il margine superiore

      Esempio:

      <div style='
      	display:grid;
      	grid-template-columns: auto auto;
      	grid-template-rows: auto auto; 
      	align-items: start;'>
      	<div>1</div>
      	<div>2</div>
      
      	<div>3</div>
      	<div>4</div>
      </div>
      1
      2
      3
      4

    • end: allinea il contenuto verso il margine inferiore

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto;
      	grid-template-rows: auto auto; 
      	align-items: end;'>
      	<div>1</div>
      	<div>2</div>
      
      	<div>3</div>
      	<div>4</div>
      </div>
      1
      2
      3
      4

    • center: allinea il contenuto al centro

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto;
      	grid-template-rows: auto auto; 
      	align-items: center;'>
      	<div>1</div>
      	<div>2</div>
      
      	<div>3</div>
      	<div>4</div>
      </div>
      1
      2
      3
      4
  • justify-content

    Allinea il contenuto dentro un grid relativo ai margini verticali, si applica a tutti gli elementi del grid.

    .contenitore{
        justify-content: stretch /* || start || end || center || space-around || space-between || space-evenly */;	
    }
    dove:

    • stretch (default): riempie tutto il width del contenitore

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto auto;
      	grid-template-rows: auto auto auto; 
      	justify-content: stretch;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9

    • start: allinea gli elementi del grid a sinistra del contenitore

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto auto;
      	grid-template-rows: auto auto auto; 
      	justify-content: start;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9

    • end: allinea gli elementi del grid a destra del contenitore

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto auto;
      	grid-template-rows: auto auto auto; 
      	justify-content: end;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9

    • center: allinea gli elementi del grid al centro del contenitore

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto auto;
      	grid-template-rows: auto auto auto; 
      	justify-content: center;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9

    • space-around: suddivide lo spazio tra le colonne del grid, e metà spazio tra i margini sinistro e destro

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto auto;
      	grid-template-rows: auto auto auto; 
      	justify-content: space-around;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9

    • space-between: suddivide lo spazio tra le colonne del grid ma non i margini sinistro o destro

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto auto;
      	grid-template-rows: auto auto auto; 
      	justify-content: space-between;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9

    • space-evenly: suddivide lo spazio tra le colonne del grid e i margini a sinistra e destra

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto auto;
      	grid-template-rows: auto auto auto; 
      	justify-content: space-evenly;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
  • align-content

    Allinea il contenuto dentro un grid relativo ai margini orizzontali, si applica a tutti gli elementi del grid.

    .contenitore{
        justify-content: stretch /* || start || end || center || space-around || space-between || space-evenly */;	
    }
    dove:

    • stretch (default): riempie tutto il height del contenitore

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto auto;
      	grid-template-rows: auto auto auto; 
      	align-content: stretch;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9

    • start: allinea gli elementi del grid verso il margine superiore del contenitore

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto auto;
      	grid-template-rows: auto auto auto; 
      	align-content: start;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9

    • end: allinea gli elementi del grid verso il margine inferiore del contenitore

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto auto;
      	grid-template-rows: auto auto auto; 
      	align-content: end;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9

    • center: allinea gli elementi del grid al centro del contenitore

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto auto;
      	grid-template-rows: auto auto auto; 
      	align-content: center;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9

    • space-around: suddivide lo spazio tra le righe del grid, e metà spazio tra i margini superiore e inferiore

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto auto;
      	grid-template-rows: auto auto auto; 
      	align-content: space-around;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9

    • space-between: suddivide lo spazio tra le righe del grid ma non i margini superiore o inferiore

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto auto;
      	grid-template-rows: auto auto auto; 
      	align-content: space-between;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9

    • space-evenly: suddivide lo spazio tra le righe del grid e i margini superiore e inferiore

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: auto auto auto;
      	grid-template-rows: auto auto auto; 
      	align-content: space-evenly;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
  • grid-auto-columns, grid-auto-rows

    Definisce la dimensione di qualsiasi track del grid implicito. Gli track del grid impliciti si creano quando si posizionano le righe o colonne con (grid-template-rows/grid-template-columns) non corrispondenti ai grid-rows/grid-columns.

    .contenitore{
        grid-auto-columns: /* dimensione-track ... */;
        grid-auto-rows: /* dimensione-track ... */;
    }
    dove:

    • dimensione-track: è un valore del tipo px, % ...

    Per capire come si creano i grid track impliciti facciamo un esempio che crea un grid 2x2:

    <div style='
    	display: grid;
    	grid-template-columns: 60% 40%;
    	grid-template-rows: 80% 20%'>
    	<div>1</div>
    	<div>2</div>
    	<div>3</div>
    	<div>4</div>
    </div>
    1
    2
    3
    4

    Se usiamo grid-column e grid-row per posizionare gli elementi in questa maniera, avremo che l'elemento-2 avrà un valore auto:

    Esempio:

    <div style='
    	display: grid;
    	grid-template-columns: 60% 40%;
    	grid-template-rows: 80% 20%'>
    	<div>1</div>
    	<div style='grid-column: 1 / 2;grid-row: 2 / 3;'>2</div>
    	<div>3</div>
    	<div style='grid-column: 3 / 4;grid-row: 2 / 3;'>4</div>
    </div>
    1
    2
    3
    4

    Possiamo modificare questo valore con:

    Esempio:

    <div style='
    	display: grid;
    	grid-template-columns: 60% 40%;
    	grid-template-rows: 80% 20%;
    	grid-auto-columns: 40%;'>
    	<div>1</div>
    	<div style='grid-column: 1 / 2;grid-row: 2 / 3;'>2</div>
    	<div>3</div>
    	<div style='grid-column: 3 / 4;grid-row: 2 / 3;'>4</div>
    </div>
    1
    2
    3
    4
  • grid-auto-flow

    Definisce il posizionamento automatico degli elementi che non hanno un posizionamento esplicito.

    .contenitore{
        grid-auto-flow: row /* || column || dense || row dense || column dense */; 
    }
    dove:

    • row: cerca di riempire le righe

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: 20% 20% 20% 20% 20%;
      	grid-template-rows: 50% 50%;
      	grid-auto-flow: row;'>
      	<div style='grid-column: 1;grid-row: 1 / 3;'>1</div>
      	<div>2</div>
      	<div style='grid-column: 5;grid-row: 1 / 3;'>3</div>
      	<div>4</div>
      	<div>5</div>
      </div>
      1
      2
      3
      4
      5

    • column: cerca di riempire le colonne

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: 20% 20% 20% 20% 20%;
      	grid-template-rows: 50% 50%;
      	grid-auto-flow: column;'>
      	<div style='grid-column: 1;grid-row: 1 / 3;'>1</div>
      	<div>2</div>
      	<div style='grid-column: 5;grid-row: 1 / 3;'>3</div>
      	<div>4</div>
      	<div>5</div>
      </div>
      1
      2
      3
      4
      5

    • dense: cerca di riempire le buche, potrebbe causare elementi fuori ordine

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: 20% 20% 20% 20% 20%;
      	grid-template-rows: 50% 50%;
      	grid-auto-flow: dense;'>
      	<div style='grid-column: 1;grid-row: 1 / 3;'>1</div>
      	<div>2</div>
      	<div style='grid-column: 5;grid-row: 1 / 3;'>3</div>
      	<div>4</div>
      	<div>5</div>
      </div>
      1
      2
      3
      4
      5
  • grid

    Abbreviazione per tutte le proprietà del contenitore/parente in un unica dichiarazione

    .contenitore{
        grid: none /* || grid-template-rows / grid-template-columns || grid-auto-flow [grid-auto-rows [/ grid-auto-columns]] */;
    }
    dove:

    • none: imposta tutte le proprietà ai loro valori di default


    • grid-template-rows / grid-template-columns: imposta grid-template-rows e grid-template-columns ai valori specificati e le altre proprietà ai loro valori di default.

      Esempio:

      <div style='
      	display: grid;
      	grid: 25% auto 25% / 20% 30% auto;'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9

    • grid-auto-flow [grid-auto-rows [/ grid-auto-columns]]: imposta i valori per grid-auto-flow, grid-auto-rows e grid-auto-columns, rispettivamente. Se grid-auto-columns è omesso si imposta il valore di grid-auto-rows. Se sono omessi entrambi si impostano ai loro valori di default.

      Esempio:

      <div style='
      	display: grid;
      	grid: 
      		"header header header header" auto
      		"main main . sidebar" auto
      		"footer footer footer footer" auto
      		/ 25% 25% 25% 25%'>
      	<div style='grid-area: header'>header</div>
      	<div style='grid-area: main'>main</div>
      	<div style='grid-area: sidebar'>sidebar</div>
      	<div style='grid-area: footer'>footer</div>
      </div>
      header
      main
      sidebar
      footer

Proprietà per gli elementi/figli Grid:

  • grid-column-start, grid-column-end, grid-row-start, grid-row-end

    Definisce la posizione di un elemento all'interno del grid facendo riferimento a specifiche linee del grid, dove grid-column-start/grid-row-start sono le linee di inizio del elemento, grid-column-end/grid-row-end la fine dell'elemento. Possiamo pensare a questi valori come a delle coordinate.

    .elemento {
        grid-column-start: auto /* || numero || nome || span numero || span nome */;
        grid-column-end: auto /* || numero || nome || span numero || span nome */;
        grid-row-start: auto /* || numero || nome || span numero || span nome */;
        grid-row-end: auto /* || numero || nome || span numero || span nome */;
    }
    dove:

    • auto: si riferisce a un auto posizionamento, span automatico oppure un valore default che corrisponde a uno span di un unità


    • numero: si riferisce a una linea del grid numerata


    • nome: si riferisce a una linea del grid nominata

      Esempio con numero, nome linea:

      <div style='
      	display: grid;
      	grid-template-columns: [iniz-col] 10% [col-2] 15% [col-3] auto [col-4] 15% [col-5] 10% [fin-col];
      	grid-template-rows: [iniz-rig] 25% [rig-2] 15% [rig-3] auto [fin-rig];'>
      	<div>1</div>
      	<div style='
      		grid-column-start: 2;
      		grid-column-end: col-5;
      		grid-row-start: iniz-rig;
      		grid-row-end: 3;'>2</div>
      	<div>5</div>
      
      	<div>6</div>
      	<div>10</div>
      
      	<div>11</div>
      	<div>12</div>
      	<div>13</div>
      	<div>14</div>
      	<div>15</div>
      </div>
      1
      2
      5
      6
      10
      11
      12
      13
      14
      15

    • span numero: si riferisce all'elemento che si estende per un certo numero di track del grid


    • span nome: si riferisce all'elemento che si estende fino alla prossima linea con il nome specificato

      Esempio dello stesso risultato con span numero, span nome linea:

      <div style='
      	display: grid;
      	grid-template-columns: [iniz-col] 10% [col-2] 15% [col-3] auto [col-4] 15% [col-5] 10% [fin-col];
      	grid-template-rows: [iniz-rig] 25% [rig-2] 15% [rig-3] auto [fin-rig];'>
      	<div>1</div>
      	<div style='
      		grid-column-start: 2;
      		grid-column-end: span col-5;
      		grid-row-start: 1;
      		grid-row-end: span 2;'>2</div>
      	<div>5</div>
      
      	<div>6</div>
      	<div>10</div>
      
      	<div>11</div>
      	<div>12</div>
      	<div>13</div>
      	<div>14</div>
      	<div>15</div>
      </div>
      1
      2
      5
      6
      10
      11
      12
      13
      14
      15
  • grid-column, grid-row

    Abbreviazione per grid-column-start + grid-column-end, e grid-row-start + grid-row-end, rispettivamente.

    .elemento {
        grid-column: /* linea-inizio / linea-fine | linea-inizio / span valore */;
        grid-row: /* linea-inizio / linea-fine | linea-inizio / span valore */;
    }
    dove:

    • linea-inizio / linea fine: si riferiscono a linea inizo / linea fine numerata o per nome

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: [iniz-col] 10% [col-2] 15% [col-3] auto [col-4] 15% [col-5] 10% [fin-col];
      	grid-template-rows: [iniz-rig] 25% [rig-2] 15% [rig-3] auto [fin-rig];'>
      	<div>1</div>
      	<div style='
      		grid-column: 2 / col-5;
      		grid-row: iniz-rig / 3;'>2</div>
      	<div>5</div>
      
      	<div>6</div>
      	<div>10</div>
      
      	<div>11</div>
      	<div>12</div>
      	<div>13</div>
      	<div>14</div>
      	<div>15</div>
      </div>
      1
      2
      5
      6
      10
      11
      12
      13
      14
      15

    • linea-inizio / span valore: si riferiscono a linea inizo numerata o per nome / linea fine span per nome o linea

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: [iniz-col] 10% [col-2] 15% [col-3] auto [col-4] 15% [col-5] 10% [fin-col];
      	grid-template-rows: [iniz-rig] 25% [rig-2] 15% [rig-3] auto [fin-rig];'>
      	<div>1</div>
      	<div style='
      		grid-column: 2 / span col-5;
      		grid-row: 1 / span 2;'>2</div>
      	<div>5</div>
      
      	<div>6</div>
      	<div>10</div>
      
      	<div>11</div>
      	<div>12</div>
      	<div>13</div>
      	<div>14</div>
      	<div>15</div>
      </div>
      1
      2
      5
      6
      10
      11
      12
      13
      14
      15
  • grid-area

    Assegna un nome a un elemento cosi da potere essere referenziato da un template cha ha la proprietà grid-template-areas, oppure può essere usato come abbreviazione per grid-row-start + grid-column-start + grid-row-end + grid-column-end.

    .elemento {
        grid-area: /* nome || inizio-riga / inizio-colonna / fine-riga / fine-colonna */;
    }
    dove:

    • nome: un nome a nostra scelta

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: 70% 30%;
      	grid-template-rows: auto;
      	grid-template-areas: 
      	  "header ."
      	  ". footer";'>
      	<div style='grid-area: header'>header</div>
      	<div>2</div>
      	<div>3</div>
      	<div style='grid-area: footer'>footer</div>
      </div>
      header
      2
      3
      footer

    • Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: [iniz-col] 10% [col-2] 15% [col-3] auto [col-4] 15% [col-5] 10% [fin-col];
      	grid-template-rows: [iniz-rig] 25% [rig-2] 15% [rig-3] auto [fin-rig];'>
      	<div>1</div>
      	<div style='
      		grid-area: 1 / 2 / span 3 / span col-5;'>2</div>
      	<div>5</div>
      
      	<div>6</div>
      	<div>10</div>
      
      	<div>11</div>
      	<div>15</div>
      </div>
      1
      2
      5
      6
      10
      11
      15
  • justify-self

    Allinea il contenuto di un singolo elemento del grid rispetto all'asse orizzontale.

    .elemento {
        justify-self: stretch /* || start || end || center */;
    }
    dove:

    • stretch (default): occupa tutto il width dell'area del grid

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: [iniz-col] 40% [col-2] 30% [col-3] auto [fin-col];
      	grid-template-rows: [iniz-rig] 30% [rig-2] auto [fin-rig];'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      	<div style='
      		grid-area: rig-2 / iniz-col / span 1 / span col-3;
      		justify-self: stretch;'>elem-4</div>
      	<div>6</div>
      </div>
      1
      2
      3
      elem-4
      6

    • start: allinea il contenuto a sinistra dell'area del grid

      Esempio:

      <div style='
      	display: grid;
          grid-template-columns: 70% 30%;
      	grid-template-rows: auto;
      	grid-template-areas: 
      	  "header ."
      	  ". footer";'>
      	<div style='
      		 grid-area: header;
      		 justify-self: start;'>header</div>
      	<div>2</div>
      	<div>3</div>
      	<div style='grid-area: footer'>footer</div>
      </div>
      header
      2
      3
      footer

    • end: allinea il contenuto a destra dell'area del grid

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: [iniz-col] 40% [col-2] 30% [col-3] auto [fin-col];
      	grid-template-rows: [iniz-rig] 30% [rig-2] auto [fin-rig];'>
      	<div style='
      		grid-area: iniz-rig / iniz-col / span 1 / span col-3;
      		justify-self: end;'>elem-1</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      </div>
      elem-1
      3
      4
      5
      6

    • center: allinea il contenuto al centro dell'area del grid

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: [iniz-col] 40% [col-2] 30% [col-3] auto [fin-col];
      	grid-template-rows: [iniz-rig] 30% [rig-2] auto [fin-rig];'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      	<div>4</div>
      	<div style='
      		grid-area: rig-2 / col-2 / span fin-rig / span 2;
      		justify-self: center;'>elem-5</div>
      </div>
      1
      2
      3
      4
      elem-5
  • align-self

    Allinea il contenuto di un singolo elemento del grid rispetto all'asse verticale.

    .elemento {
        align-self: stretch /* || start || end || center */;
    }
    dove:

    • stretch (default): occupa tutto il height dell'area del grid

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: [iniz-col] 40% [col-2] 30% [col-3] auto [fin-col];
      	grid-template-rows: [iniz-rig] 30% [rig-2] auto [fin-rig];'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      	<div style='
      		grid-area: rig-2 / iniz-col / span 1 / span col-3;
      		align-self: stretch;'>elem-4</div>
      	<div>6</div>
      
      </div>
      1
      2
      3
      elem-4
      6

    • start: allinea il contenuto dall'inizo dell'area del grid

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: 70% 30%;
      	grid-template-rows: auto;
      	grid-template-areas: 
      	  "header ."
      	  ". footer";'>
      	<div style='
      		 grid-area: header;
      		 align-self: start;'>header</div>
      	<div>2</div>
      	<div>3</div>
      	<div style='grid-area: footer'>footer</div>
      </div>
      header
      2
      3
      footer

    • end: allinea il contenuto dalla fine dell'area del grid

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: [iniz-col] 40% [col-2] 30% [col-3] auto [fin-col];
      	grid-template-rows: [iniz-rig] 30% [rig-2] auto [fin-rig];'>
      	<div style='
      		grid-area: iniz-rig / iniz-col / span 1 / span col-3;
      		align-self: end;'>elem-1</div>
      	<div>3</div>
      
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      </div>
      elem-1
      3
      4
      5
      6

    • center: allinea il contenuto al centro dell'area del grid

      Esempio:

      <div style='
      	display: grid;
      	grid-template-columns: [iniz-col] 40% [col-2] 30% [col-3] auto [fin-col];
      	grid-template-rows: [iniz-rig] 30% [rig-2] auto [fin-rig];'>
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      	<div>4</div>
      	<div style='
      		grid-area: rig-2 / col-2 / span fin-rig / span 2;
      		align-self: center;'>elem-5</div>
      </div>
      1
      2
      3
      4
      elem-5