Nel precedente articolo, abbiamo visto come realizzare una griglia utilizzando due semplici proprietà. Negli esempi che seguono, metteremo in pratica le vere, grandi potenzialità di CSS Grid.
Tramite il tool di sviluppo di Firefox, andiamo innanzitutto a sbirciare dietro le quinte del markup realizzato precedentemente. Per visualizzare correttamente la griglia bisognerà selezionare il .wrapper, e spuntare le caselle: “visualizza numeri di riga”, “visualizza nomi aree”, “estendi linee all’infinito”.

Il layout che realizzeremo è questo:

Il markup a cui faremo riferimento è il seguente:

<div class="container">
<header class="header">Header</header>
<nav class="navbar">Navbar</nav>
<section class="content">Content</section>
<aside class="sidebar">Lorem ipsum... </aside>
<footer class="footer">Footer</footer>
</div>

Definiamo l’elemento griglia e gli stili di base per tutti gli elementi in esso contenuti:

.container {
    display: grid;
    &>* {
        color: #ffffff;
        padding: 10px;
    }
}

Stabiliremo, quindi, uno stile per le righe, considerando i 5 elementi nidificati nel .container: header, navbar, content, sidebar, footer.
La regola CSS sarà la seguente:

grid-template-rows: 100px 50px 500px 80px;

I valori assegnati all’altezza delle righe saranno i seguenti:

• I valore “100px” = Header
• II valore “50px” = Navbar
• III valore “300px” = Content / Sidebar
• IV valore “80px” = Footer

Da notare che i valori sono 4 e non 5, questo perché .content e .sidebar sono disposti all’interno della medesima riga.
In realtà, invece di utilizzare la proprietà grid-template-rows, potremmo definire un’altezza per ogni elemento. Lo svantaggio sarebbe, però, l’impossibilità di controllare l’altezza di ciascun elemento sfruttando una singola riga di codice.

Definiamo il template per le colonne. In questo caso specifico, la scelta della quantità è indifferente, scegliamo quindi di realizzare un template a 4 colonne:

• 3 colonne da 1 frazione
• 1 colonna a larghezza fissa (300px) dove sarà allocata la sidebar:

grid-template-columns: repeat(3, 1fr) 300px;

Il codice SCSS definitivo sarà quindi il seguente:

.container {
    display: grid;
     
    grid-template-rows: 100px 50px 300px 80px;
    grid-template-columns: repeat(3, 1fr) 300px;
  
    &>* {
        color: #ffffff;
        padding: 10px;
    }
}

Attiviamo l’inspector di Firefox e osserviamo la griglia: noteremo che tutti gli elementi si sono disposti in sequenza all’interno di essa. Adesso, per posizionarli nel modo corretto, faremo riferimento ai numeri di riga:

Come abbiamo potuto sperimentare in precedenza, possiamo creare un nuovo grid-container attraverso la regola display: grid. Con le regole grid-template-rows e grid-template-columns andremo poi a creare righe e colonne. Proprio come avviene in Flexbox, abbiamo ricavato un contenitore flessibile.

Le linee tratteggiate orizzontali prendono il nome di row line, quelle verticali invece prendono il nome di column line. L’area compresa tra due linee viene chiamata grid-track, di tipo row o di tipo column a seconda della direzione.

Il singolo elemento compreso tra column line e row line viene chiamato grid cell, gruppi di più celle invece vengono chiamate grid area. Tutte le entità presenti all’interno della griglia prendono il nome di grid item.

Per fare in modo che .header occupi tutte le colonne in larghezza, utilizzeremo la seguente regola:

.header {
    grid-column: 1 / -1;
}

Con questa sintassi abbiamo stabilito che l’elemento .header deve occupare uno spazio compreso tra la column-line “1” (inizio) e la column-line “-1” (fine). Perché abbiamo scritto “-1” e non “5”? Osservando il seguente screenshot, noteremo che il valore 5corrisponde al valore -1;(evidenziati in giallo), quindi se per un motivo qualsiasi aumentassimo il numero di colonne da 4 a 5, il valore dell’ultima column line sarebbe 6 (e non più 5) mentre il valore corrispondente (-1) resterebbe invariato. Quindi, dichiarando la proprietà “grid-column: 1 / -1”, stiamo dicendo all’elemento .header di occupare sempre e comunque lo spazio compreso tra l’inizio e la fine delle griglia:

Definiamo adesso le regole per gli altri elementi. Da notare che .content occuperà lo spazio compreso tra la column-line 1 e la column-line -2, mentre per la sidebar non sono state stabilite regole perché occuperà implicitamente lo spazio restante:

.header {
    grid-column: 1 / -1;
    background: coral;
}
.navbar {
    grid-column: 1 / -1;
    background: brown;
}
.content {
    grid-column: 1 / -2;
    background: gray;
}
  
.sidebar {
    background: orangered;
}
  
.footer {
    grid-column: 1 / -1;
    background: brown;
}

Se invece vogliamo aggiungere dei blocchi all’interno del .content, dobbiamo trasformare anche quest’ultimo in una grid:

.content {
    grid-column: 1 / -2;
    background: gray;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 125px;
    gap: 20px;
  
    &__item {
        background: orange;
        color: #ffffff;
        padding: 10px;
    }
}

<section class="content">
<div class="content__item">block 1</div>
<div class="content__item">block 2</div>
<div class="content__item">block 3</div>
<div class="content__item">block 4</div>
    <div class="content__item">block 5</div>
<div class="content__item">block 6</div>
</section>

Il risultato ottenuto sarà il seguente:

Da notare che abbiamo utilizzato la proprietà:

gap: 20px;

si tratta di una shorthand per definire la stessa spaziatura tra righe e colonne. Le proprietà estese sono le seguenti:

row-gap: 20px;
column-gap: 20px;

Next Step

Nel prossimo articolo analizzeremo le best practices di CSS Grid e faremo un confronto con flexbox.

Alla prossima!