Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout

CSS Grid Layout: rendiamolo responsive

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Using Grid Areas
Understanding the CSS Grid “Auto-Placement Algorithm”

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.

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):

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:

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:

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".

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".

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:

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:

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.