logo Portale zerozetasm.it



Prima Parte: VISIONE D'INSIEME DELLA GRIGLIA



01. Introduzione
La specifica Grid introduce alcuni termini e concetti che bisogna comprendere per poter utilizzare la griglia alla sua piena efficacia.

La griglia CSS introduce una serie di proprietà che ci consentono di creare strutture di griglia e controllare il posizionamento e il dimensionamento degli elementi della griglia tramite lo style CSS.
Ciò significa che siamo in grado di utilizzare le query multimediali per adattare le nostre griglie a diversi contesti.
Possiamo riorganizzare il layout degli elementi della griglia indipendentemente dal loro ordine sorgente, il che ci consente di spostare gli elementi della griglia in posti diversi, secondo l'esigenza dei nostri contesti senza dover modificare il markup sottostante.
Come per le tabelle, il layout della griglia consente all'autore di allineare elementi in colonne e righe. Tuttavia, molti più layout sono possibili e di realizzazione più efficace con la griglia CSS, rispetto a quelli con le tabelle.
Grid ha anche un potente algoritmo di auto-posizionamento, che rende più facile riempire lo spazio disponibile senza dover fare molti calcoli complicati.
In una certa misura, Grid consente anche una certa flessibilità sull'asse z, in quanto è possibile sovrapporre gli elementi della griglia se necessario.


02. La struttura di griglia
Per prima cosa dobbiamo comprendere come é stata interpretata dal W3C la struttura stessa della griglia.

Visualizzazione d'insieme della Griglia


Gli elementi di una griglia rispetto al suo contenitore possono essere considerati in più di una modalità:

- come cella (è l'unità più piccola della griglia).
- come spazio tra due numeri di riga (è anche possibile assegnare un nome alle linee della griglia).
- come insiemi di spazi compresi in una traccia.
- per area a cui é stato dato un nome.
- per auto-posizionamento.
e collocati nel contenitore della griglia in una posizione molto precisa.

La griglia contiene anche un algoritmo per controllare il posizionamento di elementi che non hanno una posizione esplicita
sulla griglia e collocarli in modo automatico.


03. Proprietà degli elementi griglia
La specifica Grid è stata creata per essere molto flessibile e fornire soluzioni per molti casi d'uso diversi in modo da poter usufruire della soluzione più efficiente rispetto all'esigenza del momento.
Per ottenere tutto questo il W3C ha sviluppato in merito, una serie di proprietà Css con i rispettivi valori.
In sostanza e volendo schematizzare, hanno diviso queste proprità in due categorie:

Le proprietà da applicare al al contenitore della griglia:
  - grid-template-columns e grid-template-rows
  - grid-template-areas
  - grid-template
  - grid-column-gap e grid-row-gap
  - grid-gap
  - grid-auto-columns e grid-auto-rows
  - grid-auto-flow
  - grid
attraverso le quali si può controllare:
- La struttura della griglia
- Il numero di righe e colonne
- lo spazio tra le righe e le colonne
- il dimensionamento delle righe e delle colonne

E le proprietà dello style Css da applicare agli elementi figli all'interno del contenitore della griglia:
  - grid-column-start, grid-column-end
  - grid-row-start, grid-row-end
  - grid-column e grid-row
  - grid-area
attraverso le quali si può controllare:
- Il posizionamento degli elementi nella griglia


04. Modalità per creare una griglia
Le modalità sono molteplici, infatti per ottenere lo stesso identico layout di griglia possiamo operare con:

- Posizionamento automatico   Se gli elementi non contengono informazioni sul posizionamento, si posizioneranno sulla griglia uno per ogni sua cella.

- Posizionamento degli elementi per numero di linea  Utilizzare le linee numerate è il punto più logico da cui iniziare, poiché quando si utilizza il layout della griglia si hanno sempre linee numerate. Le righe sono numerate per colonne e righe e sono indicizzate da 1.

- Posizionamento con linee della griglia denominate  Si può assegnare un nome ad alcune o tutte le linee nella griglia e una volta che le linee hanno un nome, possiamo usare il nome per posizionare l'oggetto anziché il numero di riga.

- Posizionamento Utilizzando la parola chiave span(espansione su traccia)  Oltre a specificare le righe di inizio e fine per numero, si può specificare una linea di partenza e quindi il numero di tracce dove si vuole che l'area si estenda.

- Posizionamento con la denominazione di un'area della griglia  Si possono posizionare gli elementi utilizzando i numeri delle quattro linee che racchiudono l'area, oppure la denominazione di aree del modello conferendogli un nome.

Ognuna delle modalità sopra esposta può avere delle semplificazioni.


05. Creazione di una griglia
Per definire un .contenitore di griglia si usa la proprietà display con il valore grid.
Come per il Flexbox, questo passa al Layout-Grid tutti i figli diretti del contenitore che diventano elementi di griglia:
.contenitore { display: grid; }.
A differenza del Flexbox, gli oggetti non appariranno immediatamente diversi: La dichiarazione display: grid crea una griglia a colonna unica, di conseguenza gli elementi continueranno a mostrarsi uno sotto l'altro come nel normale flusso.

Procediamo creando un esempio (in style colorato per poterlo seguire meglio) con un div contenente una classe .contenitore e al suo all'interno quattro elementi figlio.

codice per iniziale la griglia

body {
 width: 90%;
 max-width: 900px;
 margin: 2em auto;
 font-family: Consolas, 'monospace';
 font-size: 120%;
}
.contenitore {  
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}
.contenitore > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}    
.contenitore {
  display: grid;
}

<div class="contenitore">
   <div class="box1">Primo</div>
   <div class="box2">Secondo</div>
   <div class="box3">Terzo</div>
   <div class="box4">Quarto</div>
</div>

Visualizzazione Griglia


Codice completo 

<!DOCTYPE html>
<html lang="it">
<head>
 <title>Griglia-Css</title>
 <meta charset="UTF-8">
 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
 <style type="text/css">
body {
 width: 90%;
 max-width: 900px;
 margin: 2em auto;
 font-family: Consolas, 'monospace';
 font-size: 120%;
}
.contenitore {  
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}
.contenitore > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
.contenitore {
  display: grid;
} 
 </style>
</head>

<body>

<div class="contenitore">
   <div class="box1">Primo</div>
   <div class="box2">Secondo</div>
   <div class="box3">Terzo</div>
   <div class="box4">Quarto</div>
</div>

</body>
</html>


06. L'esempio di base
Come esempio di partenza possiamo prendere una griglia con 3 colonne e 3 righe.
Questo ci dà 4 linee in ogni dimensione, ovvero quattro linee di riga e quattro linee di colonna.
All'interno del contenitore di griglia abbiamo quattro elementi figlio, e dato che li abbiamo dimensionati ma non ancora posizionati esplicitamente essi saranno disposti secondo le regole di auto-posizionamento, un elemento in ciascuna delle prime quattro celle.

codice da modificare
  
.contenitore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

Visualizzazione Griglia



07. Studio del Posizionamento
Abbiamo appena visto gli effetti dell'auto-posizionamento (un elemento per ciascuna cella), infatti ci siamo limitati ai parametri del contenitore di griglia che non prevede il posizionamento ma solo la strutturazione con display: grid; il numero di celle con grid-template-columns: repeat(3, 1fr);  e   grid-template-rows: repeat(3, 100px);   ovvero tre colonne e tre righe, e il dimensionamento 1fr(una frazione per ciascuna colonna) e 100px(di altezza per ciascuna riga) per il layout di griglia.
Ora studieremo come si possono collocare gli oggetti in una posizione precisa sulla griglia, utilizzando le varie modalità viste in precedenza, e per meglio comprendere le differenze, ricostruiremo sempre lo stesso modello di griglia.


08. Posizionamento per numero di linea
Iniziamo posizionando gli elementi per numero di linea.
Facciamo inziare il primo elemento all'estrema sinistra della griglia sulla prima riga in cima alla griglia e passare alla quarta riga, così lo estendiamo per tutta la prima colonna.
Posizionato il box1, gli altri elementi continueranno a essere disposti sulla griglia utilizzando le regole del posizionamento automatico.
Così mentre lavoriamo, possiamo avere una visione precisa di ciò che accade ovvero come la griglia sta collocando gli oggetti non posizionati nelle sue celle vuote.

codice da aggiungere
  
.box1 {
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: 4;
}

Visualizzazione Griglia



09. Elementi della griglia
Affrontiamo ora il posizionamento di ciascun elemento, posizionandoli tutti e quattro in modo da lasciare anche uno spazio vuoto.

codice da aggiungere
  
.box2 {
   grid-column-start: 3;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
}
.box3 {
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 1;
   grid-row-end: 2;
}
.box4 {
   grid-column-start: 2;
   grid-column-end: 4;
   grid-row-start: 3;
   grid-row-end: 4;
}

Visualizzazione Griglia


Per creare spazi tra le colonne, utilizzare le proprietà grid-column-gap per gli spazi tra le colonne, grid-row-gap per gli spazi tra le righe
e grid-gap per impostarle entrambe contemporaneamente.
Per gli spazi tra le colonne si può usare qualsiasi unità di lunghezza o percentuale, ma non si può usare l'unita fr.

codice da Modificare
  
.contenitore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 20px;
}
Visualizzazione Griglia


Codice completo 

<!DOCTYPE html>
<html lang="it">
<head>
 <title>Griglia-Css</title>
 <meta charset="UTF-8">
 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
 <style type="text/css">
body {
 width: 90%;
 max-width: 900px;
 margin: 2em auto;
 font-family: Consolas, 'monospace';
 font-size: 120%;
}
.contenitore {  
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}
.contenitore > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
.contenitore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 20px;
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: 4;
}
.box2 {
   grid-column-start: 3;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
}
.box3 {
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 1;
   grid-row-end: 2;
}
.box4 {
   grid-column-start: 2;
   grid-column-end: 4;
   grid-row-start: 3;
   grid-row-end: 4;
}
 </style>
</head>

<body>

<div class="contenitore">
   <div class="box1">Primo</div>
   <div class="box2">Secondo</div>
   <div class="box3">Terzo</div>
   <div class="box4">Quarto</div>
</div>

</body>
</html>


10. Semplificazione
Le proprietà grid-column-start e grid-column-end possono essere combinate in grid-column,
grid-row-start e grid-row-end in grid-row e riportare i due valori iniziale e finale su un'unica riga.
Così come indicato di seguito:

codice da sostituire
  
.box1 {
   grid-column: 1 / 2;
   grid-row: 1 / 4;
}
.box2 {
   grid-column: 3 / 4;
   grid-row: 1 / 3;
}
.box3 {
   grid-column: 2 / 3;
   grid-row: 1 /  2;
}
.box4 {
   grid-column: 2 / 4;
   grid-row: 3 / 4;
}

E avremo la stessa Visualizzazione


Ancora un altro modo per ottenere lo stesso risultato, in pratica se un elemento si estende solo su una traccia, è possibile omettere
il valore grid-column-end o grid-row-end, dato che la griglia ha come impostazione predefinita l'estensione di una traccia span.
Ciò significa che il nostro esempio iniziale, si può modificare con il codice che segue e ottenere lo stesso risultato

codice da modificare
  
.box1 {
   grid-column-start: 1;
   grid-row-start: 1;
   grid-row-end: 4;
}
.box2 {
   grid-column-start: 3;
   grid-row-start: 1;
   grid-row-end: 3;
}
.box3 {
   grid-column-start: 2;
   grid-row-start: 1;
}
.box4 {
   grid-column-start: 2;
   grid-column-end: 4;
   grid-row-start: 3;
}

E continuando a semplificare per i secondi valori degli elementi che si estendono solo su una traccia.

avremo il seguente codice:
  
.box1 {
   grid-column: 1 ;
   grid-row: 1 / 4;
}
.box2 {
   grid-column: 3 ;
   grid-row: 1 / 3;
}
.box3 {
   grid-column: 2 ;
   grid-row: 1 ;
}
.box4 {
   grid-column: 2 / 4;
   grid-row: 3 ;
}
E se vogliamo separe righe e colonne con uno spazio (gap), basta aggiungere al contenitore:
NOTA:   Se si specificano due valori, il primo è usato per grid-row-gap e il secondo per grid-column-gap così: grid-gap: 1em 20px;
  
.contenitore {  
  grid-row-gap: 1em;
  grid-column-gap: 20px;
}
Griglia spaziata


Codice completo 

<!DOCTYPE html>
<html lang="it">
<head>
 <title>Griglia-Css</title>
 <meta charset="UTF-8">
 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
 <style type="text/css">
body {
 width: 90%;
 max-width: 900px;
 margin: 2em auto;
 font-family: Consolas, 'monospace';
 font-size: 120%;
}
.contenitore {  
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}
.contenitore > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
.contenitore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-column-gap: 20px;
  grid-row-gap: 1em;
}
.box1 {
   grid-column: 1 ;
   grid-row: 1 / 4;
}
.box2 {
   grid-column: 3 ;
   grid-row: 1 / 3;
}
.box3 {
   grid-column: 2 ;
   grid-row: 1 ;
}
.box4 {
   grid-column: 2 / 4;
   grid-row: 3 ;
}
 </style>
</head>

<body>

<div class="contenitore">
   <div class="box1">Primo</div>
   <div class="box2">Secondo</div>
   <div class="box3">Terzo</div>
   <div class="box4">Quarto</div>
</div>

</body>
</html>


11. Denominazione delle linee di griglia
Nel momento in cui si defisce il contenitore della griglia, possiamo definire anche i nomi( all'interno di parentesi quadre) delle linee di riga e di colonna, con qualsiasi stringa che non appertenga alle parole chiave.
Definiamo un nome per l'inizio e la fine del contenitore, sia per le righe che per le colonne: [inizio-principale] e [fine-principale]
Quindi definiamo il blocco centrale della griglia come [inizio-contenuto] e [fine-contenuto], sia per le colonne che per le righe.

codice del contenitore
  
.contenitore {
  display: grid;
  grid-template-columns: [inizio-principale] 1fr [inizio-contenuto] 1fr [fine-contenuto] 1fr [fine-principale];
  grid-template-rows: [inizio-principale] 100px [inizio-contenuto] 100px [fine-contenuto] 100px [fine-principale];
}
Una volta che le linee hanno un nome, possiamo usare il nome di linea per posizionare l'oggetto anziché il numero di riga.

codice degli elementi contenuti
  
.box1 {
  grid-column-start: inizio-principale;
  grid-row-start: inizio-principale;
  grid-row-end: fine-principale;
}
.box2 {
  grid-column-start: fine-contenuto;
  grid-row-start: inizio-principale;
  grid-row-end: fine-contenuto;
}
.box3 {
  grid-column-start: inizio-contenuto;
  grid-row-start: inizio-principale;
}
.box4 {
  grid-column-start: inizio-contenuto;
  grid-column-end: fine-principale;
  grid-row-start: fine-contenuto;
}

E avremo esattamente la stessa Visualizzazione


Codice completo 

<!DOCTYPE html>
<html lang="it">
<head>
 <title>Griglia-Css</title>
 <meta charset="UTF-8">
 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
 <style type="text/css">
body {
 width: 90%;
 max-width: 900px;
 margin: 2em auto;
 font-family: Consolas, 'monospace';
 font-size: 120%;
}
.contenitore {  
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}
.contenitore > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
.contenitore {
  display: grid;
  grid-template-columns: [inizio-principale] 1fr [inizio-contenuto] 1fr [fine-contenuto] 1fr [fine-principale];
  grid-template-rows: [inizio-principale] 100px [inizio-contenuto] 100px [fine-contenuto] 100px [fine-principale];
}
.box1 {
  grid-column-start: inizio-principale;
  grid-row-start: inizio-principale;
  grid-row-end: fine-principale;
}
.box2 {
  grid-column-start: fine-contenuto;
  grid-row-start: inizio-principale;
  grid-row-end: fine-contenuto;
}
.box3 {
  grid-column-start: inizio-contenuto;
  grid-row-start: inizio-principale;
}
.box4 {
  grid-column-start: inizio-contenuto;
  grid-column-end: fine-principale;
  grid-row-start: fine-contenuto;
}
 </style>
</head>

<body>

<div class="contenitore">
   <div class="box1">Primo</div>
   <div class="box2">Secondo</div>
   <div class="box3">Terzo</div>
   <div class="box4">Quarto</div>
</div>

</body>
</html>


12. Utilizzando l'espansione di traccia: span
Oltre a specificare le righe di inizio e fine per numero o nominativo, si può specificare una linea di partenza e quindi il numero di tracce la cui area si deve estendere.

codice da modificare
  
.box1 {
    grid-column: 1;
    grid-row: 1 / span 3;
}
.box2 {
    grid-column: 3;
    grid-row: 1 / span 2;
}
.box3 {
    grid-column: 2;
    grid-row: 1;
}
.box4 {
    grid-column: 2 / span 2;
    grid-row: 3;
}

E avremo ancora la stessa Visualizzazione



13. Denominazione di un'area della griglia
Possiamo definire un'area della griglia specificando le linee che la racchiudono e definirla con una unica proprietà: grid-area.
L'ordine dei valori per l'area della griglia è il seguente:
- grid-row-start
- grid-column-start
- grid-row-end
- grid-column-end
Quello che stiamo facendo è la definizione di un'area attraverso il numero di linee che racchiudono quell'area stessa di griglia.

codice da modificare
  
.box1 {
   grid-area: 1 / 1 / 4 / 2;
}
.box2 {
   grid-area: 1 / 3 / 3 / 4;
}
.box3 {
   grid-area: 1 / 2 / 2 / 3;
}
.box4 {
   grid-area: 3 / 2 / 4 / 4;
}

Visualizzazione Griglia



14. Aree del modello di griglia
Tuttavia per le aree della griglia, esiste un metodo alternativo da utilizzare per posizionare gli elementi che è possibile utilizzare da sola o in combinazione con il posizionamento basato sulla linea.
Questo metodo prevede di posizionare i nostri articoli utilizzando le aree del modello con nome.

Ovvero, possiamo definire un'area dandogli un nome e quindi specificare la posizione di quell'area nel valore della
proprità: grid-template-areas e scegliere a priori come definire le zone dell'area.
Ad esempio, se vogliamo ricreare il layout del nostro esempio, possiamo identificare quattro aree principali:
primo
secondo
terzo
quarto
Con la proprietà grid-area possiamo assegnare il nome a ciascuna di queste aree.
Questo non creerà ancora alcun layout, ma ora abbiamo aree con un nome da usare come layout.

modello codice area
  
.primo {
  grid-area: pri;
}
.secondo {
  grid-area: sec;
}
.terzo {
  grid-area: ter;
}
.quarto {
  grid-area: qua;
}

Dopo aver definito questi nomi attraverso la proprietà grid-area, possiamo realizzare il layout.
Questa volta, invece di posizionare gli elementi con i numeri di riga specifici, creiamo l'intero layout sul contenitore della griglia.
Come segue:

Layout contenitore griglia
  
.contenitore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: 
    "pri ter sec"
    "pri  .  sec"
    "pri qua qua";
}


<div class="wrapper">
    <div class="primo">Primo</div>
    <div class="secondo">Secondo</div>
    <div class="terzo">Terzo</div>
    <div class="quarto">Quarto</div>
</div>

Visualizzazione Griglia


Titolo codice

Codice completo 

<!DOCTYPE html>
<html lang="it">
<head>
 <title>Griglia-Css</title>
 <meta charset="UTF-8">
 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
 <style type="text/css">
body {
 width: 90%;
 max-width: 900px;
 margin: 2em auto;
 font-family: Consolas, 'monospace';
 font-size: 120%;
}
.contenitore {  
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}
.contenitore > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
.contenitore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: 
    "pri ter sec"
    "pri  .  sec"
    "pri qua qua";
}
.primo {
  grid-area: pri;
}
.secondo {
  grid-area: sec;
}
.terzo {
  grid-area: ter;
}
.quarto {
  grid-area: qua;
}
 </style>
</head>

<body>

<div class="contenitore">
   <div class="primo">Primo</div>
   <div class="secondo">Secondo</div>
   <div class="terzo">Terzo</div>
   <div class="quarto">Quarto</div>
</div>

</body>
</html>


Seconda Parte: NOZIONI DI COMPLEMENTO

Alla fine della prima parte
Molto è stato detto nella Visione d'insieme, quasi tutto quello che può servire per la costruzione di un layout di griglia,
In questa Seconda Parte proveremo a trattare altri argomenti per una visione più completa.

15. Approfondimento creazione di griglia
Se criamo una griglia usando lunghezze in px, otterremo una griglia fissa, non responsiva
  
.contenitore {
    display: grid;
    grid-template-columns: 300px 300px 300px;
}
Codice completo funzionante 

<!DOCTYPE html>
<html lang="it">
<head>
 <title>Griglia-Css</title>
 <meta charset="UTF-8">
 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
 <style type="text/css">
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font-family: Consolas, 'monospace';
  font-size: 120%;
}        
.contenitore > div {
  border-radius: 5px;
  padding: 10px;
  background-color: #fff4e6;
  border: 2px solid #ffa94d;
}
.contenitore {
  display: grid;
  grid-template-columns: 300px 300px 300px;  <!-- modificare con: 1fr 1fr 1fr;  -->
} 
 </style>
</head>

<body>

<div class="contenitore">
  <div>Uno</div>
  <div>Due</div>
  <div>Tre</div>
  <div>Quattro</div>
  <div>Cinque</div>
  <div>Sei</div>
  <div>Sette</div>
</div>

</body>
</html>

otterremo qualcosa come nella figura che segue non responsiva:



16. Creare una griglia responsiva
Per ottenere il restringimento flessibile della griglia, quando diminuisca la larghezza della finestra del browser
occorre usare delle unità di misura percentuali: 33% 33% 33%;
Oppure, delle unità di misura particolari: "fr" questa unità rappresenta una frazione dello spazio disponibile
nel contenitore della griglia.
Modificare l'unità di misura delle colonne di griglia con fr come indicato di seguito:
  
.contenitore {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
Otterremo una griglia analoga ma proporzionale e responsiva



17. Numero di frazioni diversi
L'unità di frazionamento fr distribuisce lo spazio sempre in modo proporzionale rispetto al numero di frazioni indicate.
Qindi si possono dare valori positivi diversi al numero di frazioni che ogni colonna deve contenere, come nlell'esempio che segue:
  
.contenitore {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}
Ora la prima colonna ottiene uno spazio doppio rispetto alle altre due che mantengono solo una frazione dello spazio disponinibile,
mentre la prima colonna ne prende due, come nella figura seguente:



18. Approfondimento (gap) Spazi griglia
Come abbiamo già visto, per creare spazi tra le colonne, si utilizzanoe le proprietà grid-column-gap per gli spazi tra le colonne, grid-row-gap per gli spazi tra le righe, e grid-gap per impostarle entrambe contemporaneamente.
Possiamo usare qualsiasi unità di misura per la lunghezza, esclusa l'unita fr.

NOTA:   Le specifiche del W3C, rispetto alle le proprietà *gap prevedeno di modificarle, e renderle senza il prefisso grid, in quanto l'intenzione è quella di utilizzarle in più metodi di layout.
Al momennto le versioni con prefisso saranno mantenute come alias, quindi per qualche tempo saranno ancora sicure da utilizzare.
Potrebbe essere utile al momento, raddoppiarle e aggiungere entrambe le proprietà sia con-prefisso che senza, per essere sicuri anche in futuro.
  
.contenitore {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px; /*con prefisso*/
  gap: 20px;
}
Il risultato sarà come nella figura seguente:



19. Approfondimento sul valore repeat
Con il valore repeat si può ripetere il tutto, o solo una una parte dei valori.
Ecco un esempio della notazione ripetuta in cui il primo valore nelle parentisi repeat(4, 1fr) indica il numero di colonne che si vogliono creare e il secodo numero repeat(4, 1fr) la misura della sua dimensione:

  /* Esempio-01: due colonne */
.contenitore {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

  /* Esempio-02: quattro colonne */
.contenitore {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
E otterremmo i risultati sotto esposti.




20. Griglia implicita ed esplicita
Una griglia é considera esplicita, quando sono esplicitati e valorizzati i parametri delle colonne grid-template-columns e delle
righe grid-template-rows.

Per impostazione predefinita, le tracce (righe e colonne) create nella griglia implicita vengono auto-dimensionate per adattarsi al loro contenuto.
Se vogliamo che la griglia d'esempio sia connsiderata dimensionata esplicitamente, dobbiamo valorizzare anche la proprietà relativa alle righe,
e possiamo farlo con grid-auto-row e un valore in pixel.

  
.contenitore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}
Codice completo funzionante 

<html lang="it">
<head>
  <title>Prima Griglia</title>
  <meta charset="UTF-8">
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
  <style type="text/css">
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font-family: Consolas, 'monospace';
  font-size: 120%;
}        
.contenitore > div {
  border-radius: 5px;
  padding: 10px;
  background-color: #fff4e6;
  border: 2px solid #ffa94d;
}
.contenitore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}
  </style>
</head>

<body>
  <div class="contenitore">
    <div>Uno</div>
    <div>Due</div>
    <div>Tre</div>
    <div>Quattro</div>
    <div>Cinque</div>
    <div>Sei</div>
    <div>Sette</div>
  </div> 
</body>
</html>

E otterremmo una griglia dimensionata esplicitamente con il risultato sotto esposto.




21. La funzione minmax()
Le nostre tracce alte 100 pixel non saranno molto utili se aggiungiamo contenuti a quelle tracce che sono più alte di 100 pixel, nel qual caso causerebbe un overflow.
Potrebbe essere meglio disporre di brani con un'altezza di almeno 100 pixel e che possano ancora espandersi se vengono inseriti più contenuti.

La funzione minmax() ci consente, ad esempio, di impostare una dimensione minima e massima, ovvero minmax(100px, auto).
La dimensione minima è 100 pixel, ma il massimo è auto, che si espanderà per adattarsi al contenuto.
Provare a cambiare il valore grid-auto-rows per usare un valore minmax():


SENZA la funzione minimax()



.contenitore {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 20px;
}

CON la funzione minmax(100px, auto);


codice con la funzione minmax()
Codice completo 

<html lang="it">
<head>
  <title>Griglia css</title>
  <meta charset="UTF-8">
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
  <style type="text/css">
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font-family: Consolas, 'monospace';
  font-size: 90%;
}        
.contenitore > div {
  border-radius: 5px;
  padding: 10px;
  background-color: #fff4e6;
  border: 2px solid #ffa94d;
}
.contenitore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
  </style>
</head>

<body>
  <div class="contenitore">
    <div>Uno<br/>
    Curabitur commodo aliquam ex sed placerat. Sed eu odio consectetur.
    </div>
    <div>Due<br/>
    Curabitur commodo aliquam ex sed placerat. Sed eu odio consectetur, vestibulum massa vitae, gravida elit.Suspendisse potenti.
    </div>
    <div>Tre<br/>
    Curabitur commodo aliquam ex sed placerat. Sed eu odio consectetur, vestibulum massa vitae, gravida elit. Proin commodo malesuada mi non ultricies. 
    </div>
    <div>Quattro<br/>
    Curabitur commodo aliquam ex sed placerat. Sed eu odio consectetur, vestibulum massa vitae, gravida elit. Proin commodo malesuada mi non ultricies. Suspendisse potenti.
    </div>
    <div>Cinque<br/>
    Curabitur commodo aliquam ex sed placerat. Sed eu odio consectetur, vestibulum massa vitae, gravida elit. Proin commodo malesuada mi non ultricies. Suspendisse potenti. Phasellus ac ante ac arcu venenatis viverra quis vitae erat.
    </div>
    <div>Sei<br/>
    Curabitur commodo aliquam ex sed placerat. Sed eu odio consectetur, vestibulum massa vitae, gravida elit. Proin commodo malesuada mi non ultricies. Suspendisse potenti. Phasellus ac ante ac arcu venenatis viverra quis vitae erat. Donec at sem at ligula vestibulum dictum id vitae ipsum.
    </div>
    <div>Sette<br/>
    Curabitur commodo aliquam ex sed placerat. Sed eu odio consectetur, vestibulum massa vitae, gravida elit. Proin commodo malesuada mi non ultricies. Suspendisse potenti. Phasellus ac ante ac arcu venenatis viverra quis vitae erat. Donec at sem at ligula vestibulum dictum id vitae ipsum. Etiam porta quam ut urna condimentum.
    </div>
  </div> 
</body>
</html>


22. Quante colonne si adatteranno
Possiamo ripetere la notazione minmax() per creare un modello utile, per chiedere alla griglia di creare tutte le colonne che si adattano al contenitore.
Possiamo fare ciò impostando il valore grid-template-columns sull'utilizzo diella notazione repeat(), ma invece di passare un numero, passare la parola chiave auto-fill.
E per il secondo parametro della funzione usiamo minmax(), con un valore minimo uguale alla dimensione minima della traccia che vorremmo avere, e un massimo di 1fr.
come codice che segue:


.contenitore {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}

e aggiungendo anche un gap, otterremo:


Funziona perché la griglia crea più colonne da 200 pixel che si adattano al contenitore,
quindi condivide lo spazio rimanente tra tutte le colonne:
il massimo è 1fr, che, come sappiamo, distribuisce lo spazio uniformemente tra le tracce.


GRID e FLEXBOX

23. Layout monodimensionale e bidimensionale

Per molto tempo la creazione di layout Css, è stata legata agli unici strumenti affidabili e compatibili con i cross browser,
ovvero il float e il posizionamento, con il loro carico di frustrazione e limitazione per:
- Centrare verticalmente un blocco di contenuto all'interno del suo genitore.
- Fare in modo che tutti i figli di un contenitore occupassero la stessa quantità di  larghezza / altezza  disponibile.
- Far si che, in un layout a colonne multiple e con diversa quantità di contenuto adottassero tutte la stessa altezza.

Come sappiamo, il FlexBox ha risolto egregiamente i problemi sopra indicati.

La differenza fondamentale che caratterizza sia il Css Grid Layout e sia il Css Flexbox Layout è che:
Il flexbox è stato progettato per il layout in una dimensione: una riga o una colonna.
La griglia è stata progettata per un layout bidimensionale: righe e colonne allo stesso tempo.
Il layout griglia Css è stato progettato per funzionare insieme ad altre parti delle specifiche Css, come parte di un sistema completo per eseguire il layout, quindi può anche condividere alcune funzionalità di base.

Una semplice domanda da porsi quando si decide tra la griglia o la flexbox è:
- Se ho solo bisogno di controllare il contenuto di una riga o di una colonna - utilizzare il flexbox.
- Se ho bisogno di controllare il layout sia per riga e sia per colonna - utilizzare la griglia

In pratica, oltre alla distinzione unidimensionale e bidimensionale, possiamo usare lo style Css della griglia per creare tutta la struttura del layuot di base, e usare lo style Css del flexBox per impostare(volendo) il contenuto di ogni riga e ogni colonna del layout di base creato con il Css di griglia.

Un caso d'uso ideale per il flexbox è quando si dispone di una serie di articoli e si desidera distanziarli uniformemente in un contenitore.
Lasciare che la dimensione del contenuto decida automaticamente quanto spazio individuale occupa ogni oggetto.
Se gli elementi si espandono su una nuova riga, calcoleranno la loro spaziatura in base alla loro dimensione e allo spazio disponibile su quella riga.

La griglia funziona dal punto di vista della realizzazione del layout per una pagina o per la base di tutto il sito.
Quando si utilizza il Css di griglia, si consente in genere di automatizzare il posizionamento degli elementi nelle celle della griglia, e questo avviene in base alle rigorose regole di griglia, quindi, la possibilità di usare anche il flexBox.



24. Esempio monodimensionale
Un duplice esempio per mettere in evidenza la differenza tra layout mono e bidimensionali
e in questo primo esempio, useremo il flexbox per disporre una serie di box.

Abbiamo un contenitore con cinque elementi figlio a cui applichiamo la proprietà flex,
in modo che siano liberi di crescere e decrescere da una base di 150 pixel.
Impostiamo anche la proprietà flex-wrap: wrap; in modo che se lo spazio del contenitore non è sufficiente,
gli oggetti si espanderenno su una nuova riga.

codice primo esempio
  
.contenitore {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
}
.contenitore > div {
 flex: 1 1 150px;
}

<div class="contenitore">
  <div>Uno</div>
  <div>Due</div>
  <div>Tre</div>
  <div>Quattro</div>
  <div>Cinque</div>
</div>
e otterremo:


L'immagine mostra che due elementi sono stati spinti su una nuova linea.
Ma non si allineano al di sotto degli elementi sopra dimensionati.
Questo perché quando si espandono gli elementi flex, ogni nuova riga (o colonna quando si lavora per colonna) diventa un nuovo contenitore flessibile, dimostrando così che il flexbox lavora solo su una riga o una colonna.

Codice completo 

<!DOCTYPE html>
<html lang="it">
<head>
 <title>Griglia-Css</title>
 <meta charset="UTF-8">
 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
 <style type="text/css">
body {
 width: 90%;
 max-width: 600px;
 margin: 2em auto;
 font-family: Consolas, 'monospace';
 font-size: 120%;
}
.contenitore > div {
  border-radius: 5px;
  padding: 10px;
  background-color: #fff4e6;
  border: 2px solid #ffa94d;
}
.contenitore {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
}
.contenitore > div {
 flex: 1 1 150px;
}
 </style>
</head>

<body>

<div class="contenitore">
  <div>Uno</div>
  <div>Due</div>
  <div>Tre</div>
  <div>Quattro</div>
  <div>Cinque</div>
</div>

</body>
</html>


25. Esempio bidimensionale
Questo esempio ricalca esattamente quello precedente, ma useremo un layout Grid.
Questa volta abbiamo tre colonne con unità di misura frazionario: 1fr.
Non è necessario impostare nulla sugli elementi stessi perchè si stenderanno uno in ogni cella della griglia creata.

codice secondo esempio
  
.contenitore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
e otterremo:


E come si può vedere, si allineano rigorosamente tutti nella griglia, righe e colonne.
Al punto che con cinque elementi, otteniamo un gap alla fine della seconda fila.
Dimostrando appunto che nella griglia si ragiona sempre in termini bidimenzionali.

Codice completo 

<!DOCTYPE html>
<html lang="it">
<head>
 <title>Griglia-Css</title>
 <meta charset="UTF-8">
 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
 <style type="text/css">
body {
 width: 90%;
 max-width: 600px;
 margin: 2em auto;
 font-family: Consolas, 'monospace';
 font-size: 120%;
}
.contenitore {  
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}
.contenitore > div {
  border-radius: 5px;
  padding: 10px;
  background-color: #ffd8a8;
  border: 2px solid #ffa94d;
}
.contenitore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
 </style>
</head>

<body>

<div class="contenitore">
  <div>Uno</div>
  <div>Due</div>
  <div>Tre</div>
  <div>Quattro</div>
  <div>Cinque</div>
</div>

</body>
</html>

Per concludere: DUE ESERCITAZIONI PRATICHE

26. Esercitazione 1
In questa esercitazione combineremo Css layout Grid e Css Flexbox.
Una esercitazione per comprendere le teoria sopra esposte e realizzare un layout di pagina tramite lo style Css.
Questo layout ha le seguenti caratteristiche:
- un centro fluido con barre laterali a larghezza fissa
- la colonna centrale con il contenuto principale appare per prima nell'ordine sorgente
- qualsiasi colonna può essere la più alta e tutte le colonne corrisponderanno a tale altezza.
Inoltre, renderemo questo layout reattivo, regolando le posizioni di ogni sezione sulla griglia man mano che la larghezza della vista diminuirà.

L'immagine sottostante può dare un'idea di ciò che ci apprestiamo a fare.


Iniziamo creando la struttura html
  
<div class="contenitore">
  <header><h4>Intestazione</h4></header>
  <article>
    <p>...</p>
  </article>
  <nav>
    <h4>Naviga</h4>
    <a class="link" href="#">Home</a>
    <a class="link" href="#">Capitolo 1</a>
    <a class="link" href="#">Capitolo 2</a>
    <a class="link" href="#">Capitolo 3</a>
    <a class="link" href="#">Capitolo 4</a>
  </nav>
  <aside>
    <h4>Aside</h4>
    <p>...</p>
  </aside>
  <footer><h4>Footer</h4></footer>
</div>


27. Realizzazione Es.1
Quindi, dobbiamo creare la struttura della griglia per ospitare tutti i contenuti.
Useremo una griglia con 3 colonne e 5 righe.
La prima sarà fissata a 8em e l'ultima colonna sarà fissata a 11m, e la prima e l'ultima riga saranno fissate a 4em.
Per raggiungere il requisito di avere colonne di uguale altezza indipendentemente dalla quantità di contenuto all'interno di ciascuna di esse,
faremo uso delle proprietà di posizionamento della griglia grid-row e grid-column.
Utilizziamo anche le query multimediali per riorganizzare il layout nelle diverse dimensioni di visualizzazione.

.contenitore {
  margin: 10px auto;
  max-width: 1040px;
  display: grid;
  grid-template-columns: 8em auto 11em;
  grid-template-rows: 4em auto auto auto 4em;
}
footer {
  background-color: #ee7970;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;  
  grid-column: 1 / 4;
  grid-row: 5;
}
@media screen and (min-width: 800px) {
  header {
    grid-column: 1 / 4;
  }
  nav {
    grid-row: 2 / 5;
    grid-column: 1;
  }
  aside { 
    grid-row: 2 / 5;
    grid-column: 3;
  }
  article {
    grid-row: 2 / 5;
    grid-column: 2;
  }
}

Visualizzazione Griglia


Codice completo 

<!DOCTYPE html>
<html lang="it">
<head>
 <title>titolo</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <style type="text/css">
body {
  font-family: Verdana, "sans-serif";
}
nav {
  background-color: #8caedc;
  padding: 0.5em;
}
article {
  background:  #fffad3;
  padding: 0.5em;
}
aside {
  background-color: #fbcca2;
  padding: 0.5em;  
}
h4 {
  margin-bottom: 0.5em;
  text-align: center;  
}
p {
  line-height: 1.5;
  margin-bottom: 1em;
  padding: 0.5em;  
}
.link {
  display: block;
  margin-bottom: 0.5em;
  text-align: center;
}
header {
  background-color: #b9d586;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contenitore {
  margin: 10px auto;
  max-width: 1040px;
  display: grid;
  grid-template-columns: 8em auto 11em;
  grid-template-rows: 4em auto auto auto 4em;
}
footer {
  background-color: #ee7970;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;  
  grid-column: 1 / 4;
  grid-row: 5;
}
@media screen and (min-width: 800px) {
  header {
    grid-column: 1 / 4;
  }
  nav {
    grid-row: 2 / 5;
    grid-column: 1;
  }
  aside { 
    grid-row: 2 / 5;
    grid-column: 3;
  }
  article {
    grid-row: 2 / 5;
    grid-column: 2;
  }
}
@media screen and (min-width: 480px) and (max-width: 799px) {
  nav {
    grid-column: 1;
    grid-row: 2;
  }
  aside {
    grid-column: 1;
    grid-row: 3 / 5;
  }
  article {
    grid-column: 2 / 4;
    grid-row: 1 / 5;
  }
}
@media screen and (max-width: 479px) {
  header {
    grid-column: 1 / 4;
  }
  article {
    grid-column: 1 / 4;
    grid-row: 2;
  }
  aside {
    grid-column: 1 / 4;
    grid-row: 3;
  }
  nav {
    grid-column: 1 / 4;
    grid-row: 4;
  }
}
</style>
</head>
<body>
<div class="contenitore">
  <header><h4>Intestazione</h4></header>
  <article>
    <p>"È molto triste quindi che così tanti bambini siano frettolosi e non abbiano il tempo di pensare a se stessi. La gente dice loro quando pensano di aver giocato abbastanza a lungo: "Non sei più un bambino. Devi iniziare a fare qualcosa. "Ma anche se il gioco non sta facendo nulla, stai davvero facendo qualcosa quando suoni; stai pensando a te stesso. Molti bambini giocano nel modo sbagliato. Fanno il lavoro fuori dal gioco. Non sembrano solo fare qualcosa, stanno davvero facendo qualcosa. Stanno imitando gli adulti intorno a loro che fanno sempre il più e il meno possibile. E sono spesso incoraggiati a giocare in questo modo dagli adulti. E non stanno imparando ad essere se stessi."</p>
    <p>"Ci sono molte persone che non sono interamente se stesse perché da bambini non hanno avuto il tempo di pensare a se stesse. E poiché non sanno tutto di se stessi, non possono sapere tutto di tutto. Ma a nessuno piace ammettere che non sa tutto di tutto. E così queste persone cercano di compensare non sapendo tutto di tutto facendo cose".</p>
    <p><small>Fonte: <em>quattro lettere non pubblicate a Catherine di Laura </em> Riding</small></p>
  </article>
  <nav>
    <h4>Naviga</h4>
    <a class="link" href="#">Home</a>
    <a class="link" href="#">Capitolo 1</a>
    <a class="link" href="#">Capitolo 2</a>
    <a class="link" href="#">Capitolo 3</a>
    <a class="link" href="#">Capitolo 4</a>
  </nav>
  <aside>
    <h4>Aside</h4>
    <p>"Un'opera d'arte è buona se è nata dalla necessità. In questa sua natura di origine c'è il giudizio: non c'è altro." 
     <br>- Rainer Maria Rilke</p>
  </aside>
  <footer><h4>Footer</h4></footer>
</div>
</body>
</html>


28. Esercitazione 2
Un elenco di prodotti posizionati automaticamente:
Molti layout sono essenzialmente insiemi di "carte" per:
- elencare prodotti
- gallerie di immagini
- gruppi multimedia
- miniature di figure e così via.
Una griglia può semplificare la creazione di questi elenchi in modo reattivo senza dover aggiungere query multimediali per renderlo tale.
In questa esercitazione combineremo Css layout Grid e Css Flexbox per creare una disposizione di elenco prodotti.

Il markup realizza un elenco non ordinato di elementi.
Ogni articolo contiene un'intestazione, un testo di altezza variabile e un link di collegamento.

codice HtmL
  
<ul class="elenco">
  <li>
    <h3>Primo elemento</h3>
    <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p></div>
    <div class="coll"><a href="">Collegamento a</a></div>
  </li>
   <li>
     <h3>Secondo elemento</h3>
     <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p></div>
     <div class="coll"><a href="">Collegamento a</a></div>
   </li>
   <li class="wide">
     <h3>Terzo elemento</h3>
     <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p> 
     <p>Questo ha più testo degli altri elementi.</p>
     <p>Molto di più</p>
     <p>Forse potremmo fare qualcosa di diverso con esso?</p></div>
     <div class="coll"><a href="">Collegamento a</a></div>
    </li>
    <li>
     <h3>Quarto elemento</h3>
     <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p></div>
     <div class="coll"><a href="">Collegamento a</a></div>
    </li>
     <li>
     <h3>Quinto elemento</h3>
     <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p></div>
      <div class="coll"><a href="">Collegamento a</a></div>
    </li>
</ul>

Creeremo una griglia con un numero di colonne flessibili.
Vogliamo che non diventino mai più piccoli di 200 pixel e che condividano lo spazio rimanente allo stesso modo.
Inoltre vogliamo che le colonne siano sempre di larghezza uguale.

Possiamo ottenere questo con la funzione minmax(); la notazione repeat(); e con un dimensionamento di traccia.

codice Css
  
.elenco {
  list-style: none;
  margin: 2em;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
}

Non appena aggiungo questo CSS, gli elementi iniziano a essere disposti come una griglia. Se faccio diventare la finestra più piccola o più larga il numero delle tracce di colonna cambia, senza che io debba aggiungere punti di interruzione usando le query sui media e ridefinire la griglia.

Posso quindi riordinare gli interni delle scatole usando un piccolo tocco di flexbox. Ho impostato la voce dell'elenco su display: flexe flex-directionsu column. Posso quindi utilizzare un margine automatico su .ctaper spingere questa barra verso il basso nella parte inferiore della scatola.

codice Css
  
.elenco li {
  border: 1px solid #ef7f1a;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.elenco .coll {
  margin-top: auto;
  border-top: 1px solid #ef7f1a;
  padding: 10px;
  text-align: center;
}
.elenco .contenuto {
  padding: 10px;
}

Questo è davvero uno dei motivi principali per cui utilizzerei la flexbox piuttosto che la griglia, se sto solo allineando o distribuendo qualcosa in una singola dimensione, questo è un caso d'uso della flexbox.


Codice completo 

<!DOCTYPE html>
<html lang="it">
<head>
 <title>Griglia-Css</title>
 <meta charset="UTF-8">
 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
 <style type="text/css">
* {box-sizing: border-box;}
img {max-width: 100%; display: block;}

body {
  font: 1.2em Verdana, Helvetica, arial, sans-serif;
}
a:link, a:visited {
  text-decoration: none;
  color: #f08c00;
}
h3 {
  background-color: #f08c00;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 20px;
}
.elenco {
  list-style: none;
  margin: 2em;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
}
.elenco li {
  border: 1px solid #ef7f1a;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.elenco .coll {
  margin-top: auto;
  border-top: 1px solid #ef7f1a;
  padding: 10px;
  text-align: center;
}
.elenco .contenuto {
  padding: 10px;
}

 </style>
</head>

<body>

<ul class="elenco">
  <li>
    <h3>Primo elemento</h3>
    <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p></div>
    <div class="coll"><a href="">Collegamento a</a></div>
  </li>
   <li>
     <h3>Secondo elemento</h3>
     <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p></div>
     <div class="coll"><a href="">Collegamento a</a></div>
   </li>
   <li class="grande">
     <h3>Terzo elemento</h3>
     <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p> 
     <p>Questo ha più testo degli altri elementi.</p>
     <p>Molto di più</p>
     <p>Forse potremmo fare qualcosa di diverso con esso?</p></div>
     <div class="coll"><a href="">Collegamento a</a></div>
    </li>
    <li>
     <h3>Quarto elemento</h3>
     <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p></div>
     <div class="coll"><a href="">Collegamento a</a></div>
    </li>
     <li>
     <h3>Quinto elemento</h3>
     <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p></div>
      <div class="coll"><a href="">Collegamento a</a></div>
    </li>
</ul>

</body>
</html>


29. Estensione su due tracce
L'esercizio appena portato a termine è completo e funziona bene.
Tuttavia può capitare che una delle nostre Card contenga molto più contenuto rispetto agli altri elementi.
nel caso in cui gli articoli non hanno un ordine prestabilito potrebbe essere utile permettere all'elemento in esame di estendersi su due tracce con la prprietà di riordinamento automaticogrid-auto-flow: dense; cioè con riempimento di eventuali buchi.
Dopo di chè, abbiamo una classe chiamata .grande nel nostro esempio con più contenuto, quindi possiamo aggiungere una regola grid-column-end con un valore di span 2.

codice da modificare
  
.elenco {
  list-style: none;
  margin: 2em;
  display: grid;
  grid-gap: 20px;  
  grid-auto-flow: dense;  
  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
}
/* codice da aggiungere */
.elenco .grande {
  grid-column-end: span 2;
}
Ora quando la griglia incontra questo elemento, gli assegnerà due tracce.


Codice completo 

<!DOCTYPE html>
<html lang="it">
<head>
 <title>Griglia-Css</title>
 <meta charset="UTF-8">
 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
 <style type="text/css">
* {box-sizing: border-box;}
img {max-width: 100%; display: block;}

body {
  font: 1.2em Verdana, Helvetica, arial, sans-serif;
}
a:link, a:visited {
  text-decoration: none;
  color: #f08c00;
}
h3 {
  background-color: #f08c00;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 20px;
}
.elenco {
  list-style: none;
  margin: 2em;
  display: grid;
  grid-gap: 20px;  
  grid-auto-flow: dense;  
  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
}
.elenco .grande {
  grid-column-end: span 2;
}
.elenco li {
  border: 1px solid #ef7f1a;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.elenco .coll {
  margin-top: auto;
  border-top: 1px solid #ef7f1a;
  padding: 10px;
  text-align: center;
}
.elenco .contenuto {
  padding: 10px;
}
 </style>
</head>

<body>

<ul class="elenco">
  <li>
    <h3>Primo elemento</h3>
    <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p></div>
    <div class="coll"><a href="">Collegamento a</a></div>
  </li>
   <li>
     <h3>Secondo elemento</h3>
     <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p></div>
     <div class="coll"><a href="">Collegamento a</a></div>
   </li>
   <li class="grande">
     <h3>Terzo elemento</h3>
     <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p> 
     <p>Questo ha più testo degli altri elementi.</p>
     <p>Molto di più</p>
     <p>Forse potremmo fare qualcosa di diverso con esso?</p></div>
     <div class="coll"><a href="">Collegamento a</a></div>
    </li>
    <li>
     <h3>Quarto elemento</h3>
     <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p></div>
     <div class="coll"><a href="">Collegamento a</a></div>
    </li>
     <li>
     <h3>Quinto elemento</h3>
     <div class="contenuto"><p>Il contenuto di questo elemento di elenco va qui.</p></div>
      <div class="coll"><a href="">Collegamento a</a></div>
    </li>
</ul>

</body>
</html>


30. Conclusione
Un cammino abbastanza lungo ma anche abbastanza competo per tenere dietro alle specifiche del W3C create per essere molto flessibili e fornire soluzioni per molti e diversi casi d'uso.
Come se in qualche modo velessero compensare quel lungo periodo grigio, in cui il layout era tutto e unicamente legato al float e al posizionamento relativo, fisso e assoluto.