CSS Grid Layout: rendiamolo responsive

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Per tutta questa serie abbiamo acquisito familiarità con la sintassi di Grid, abbiamo imparato a conoscere alcuni modi efficaci per disporre gli elementi in una pagina e abbiamo detto addio ad alcune vecchie abitudini. In questo tutorial applicheremo tutto questo a qualche pratica di responsive web design.

Media query

È opportuno utilizzare la demo da dove avevamo lasciato l'ultima volta.

Please accept marketing cookies to load this content.

Si compone di due griglie dichiarate; la nostra griglia principale e la griglia nidificata all'interno di uno dei nostri elementi. Possiamo controllare quando queste griglie entrano in effetto usando le media query, ciò significa che possiamo ridefinire completamente il nostro layout alle diverse larghezze del viewport.

Iniziamo duplicando la prima dichiarazione di griglia, e avvolgendo il duplicato in una media query mobile-first (sto usando 500px come il punto di interruzione, ma è completamente arbitrario):

.grid-1 {
    /* grid declaration styles */
}


@media only screen and (min-width: 500px) {

    .grid-1 {
        /* grid declaration styles */
    }

}

Ora, all'interno prima della dichiarazione cambieremo come viene definita la nostra griglia, mettendo il tutto in una singola colonna. Elencheremo solo una colonna nella nostra regola di grid-template-columns, assicuratevi che le quattro righe che abbiamo ora siano definite con grid-template-rows e organizzate il layout con grid-template-areas:

.grid-1 {
    display: grid;
    width: 100%;
    margin: 0 auto;
    
    grid-template-columns: 1fr;
    grid-template-rows: 80px auto auto 80px;
    grid-gap: 10px;
    
    grid-template-areas:    "header"
                            "main"
                            "sidebar"
                            "footer";
}

Abbiamo anche fatto la nostra grid-gap solo 10px per impostazione predefinita, per tenere conto degli schermi più piccoli.

Ecco quello che ci dà. Si noterà che stiamo anche utilizzando la nostra media query per modificare il padding e il font-size sui nostri elementi .grid-1 div.

La nostra griglia nidificata

Ciò si prende cura del layout principale, ma abbiamo ancora la griglia nidificata che rimane ostinatamente nel suo layout a due colonne in tutte le circostanze. Per sistemare le cose, faremo esattamente lo stesso di prima, ma utilizzando un diverso punto di interruzione per suggerire un approccio prima-il-contenuto:

.item-2 {
    /* grid declaration styles */
}


@media only screen and (min-width: 600px) {

    .item-2 {
        /* grid declaration styles */
    }

}

Scopri il risultato finale su CodePen.

Un paio di cose da notare qui:

Come abbiamo detto prima, è possibile organizzare visivamente gli elementi della griglia indipendentemente dall'ordine di origine, e le media query significano che possiamo avere diversi ordini visuali per le larghezze differenti dello schermo. Tuttavia, la nidificazione deve rimanere fedele alla sorgente; i nostri elementi della griglia nidificata devono sempre essere visivamente ed effettivamente discendenti del loro genitore.
Le transizioni CSS non hanno alcuna influenza sul layout Grid. Quando le nostre media query entrano in azione, e le nostre aree della griglia si spostano nelle nuove posizioni, non potrete più metterle a posto facilmente.

auto-fill e minmax()

Un altro (sorta di) approccio responsive a Grid si presta bene ai layout di tipo masonry; blocchi che dimensionano e scorrono automaticamente, a seconda del viewport.

auto-fill

Il nostro approccio fino ad ora è stato di dettare quante tracce ci sono e guardare gli elementi che si adattano di conseguenza. Questo è ciò che sta accadendo in questa demo; abbiamo grid-template-columns: repeat(4, 1fr); che dice "crea quattro colonne e rendile ognuna un'ampia unità singola di frazione".

Please accept marketing cookies to load this content.

Con la parola chiave auto-fill possiamo dettare quanto larghe sono le nostre tracce e lasciare che Grid risolva quanti si adatteranno allo spazio disponibile. In questa demo abbiamo usato grid-template-columns: repeat(auto-fill, 9em); che dice "fate le colonne larghe 9em ognuna e adattatene quante più potete nel contenitore della griglia".

Please accept marketing cookies to load this content.

Nota: questo tiene conto anche delle spaziature, grid-gap.

Il contenitore in queste demo ha uno sfondo scuro per mostrare chiaramente quanto spazio è disponibile, e vedrete che non è stato completamente riempito nell'ultimo esempio. Così come lo facciamo?

minmax()

La funzione minmax() consente di impostare una dimensione minima e una massima per una traccia, consentendo a Grid di lavorare al loro interno. Ad esempio potremmo installare tre colonne, le prime due con ampiezza di 1fr, l'ultima con un massimo di 1fr, ma restringimendola non più piccola di 160px:

1	grid-template-columns: 1fr 1fr minmax(160px, 1fr);

Tutte le colonne si ridurranno come riducete la finestra, ma solo l'ultima colonna sarà schiacciata per ora. Date un'occhiata.

Tornando alla nostra demo auto-fill, se dovessimo modificare la larghezza della colonna con minmax(9em, 1fr) Grid metterebbe 9em a tutte le tracce possibili, ma poi le espanderebbe fino ad un massimo di 1fr fino a quando il contenitore viene riempito:

Please accept marketing cookies to load this content.

Avvertimento: Grid ricalcolerà le tracce al momento di ricaricare la pagina (prova a schiacciare la finestra del browser e aggiornate), ma non farà così il ridimensionamento della finestra. Le media query possono essere utilizzate per modificare i valori, ma ancora non si comporterà bene con il ridimensionamento della finestra.

Conclusione

Ricapitoliamo con alcuni punti:

Le media query possono aiutarci a riorganizzare completamente il layout Grid ridefinendo grid-template-areas (e altre cose) per diversi scenari.
Le transizioni CSS non hanno alcun effetto sulle modifiche apportate al layout della griglia.
La parola chiave auto-fill è utile per il riempimento dei contenitori della griglia.
La funzione minmax() combacia bene con auto-fill, assicurandosi che i contenitori siano riempiti correttamente, ma non ci dà il "responsiveness" nel vero senso della parola.

Con le lezioni apprese in questa serie, siete armati per uscire e iniziare a giocare con Grid! Restate sintonizzati per ulteriori tutorial di Grid, esercizi pratici, soluzioni ai problemi comuni dei layout e aggiornamenti.

Risorse utili

Grid per esempio 29: minmax() e colonne e righe che si espandono di Rachel Andrew
Video: Rachel Andrew (ovviamente) dimostrare minmax() sul layout della homepage di Tuts+
Bozza del W3C: auto-fill
Bozza del W3C: minmax()