Come creare un layout di carta utilizzando il layout di griglia CSS

Nota del redattore: questo guest post è stato scritto da Abbey Fitzgerald, un ingegnere del software UX e web designer che ama l'arte di creare codice.

I CSS Grid Layouts stanno cambiando il modo in cui lavorano i web designer, consentendo un modo più efficiente di disporre i contenuti del sito web.

Era tanto atteso, ma finalmente questo approccio è davvero decollato e, in molti casi, è in produzione. Ha rivoluzionato il modo in cui i siti web sono progettati e una volta che i designer avranno capito, darà maggiore flessibilità ai layout web.

Se hai provato a progettare con CSS Grid e hai consultato i tutorial sul Web, potresti aver trovato informazioni relative a un approccio generale al layout. Cose come: intestazione, contenuto, piè di pagina, ecc.

Tuttavia, CSS Grid può essere utile anche per altri dettagli del sito web, come le carte. I layout delle carte sono un modo comune di visualizzare i contenuti e possono essere creati in modo efficiente con CSS Grid. Utilizzando questo metodo, le aree del contenuto della scheda sono facilmente ripetibili, possono essere visualizzate su molti tipi di dispositivi diversi e le dimensioni sono facilmente controllabili.

Strumenti di layout della griglia CSS

Mentre procedi, vorrai ispezionare le cose sulla pagina. Firefox ha ottimi strumenti per sviluppatori per vedere le aree della griglia. Utilizzando gli strumenti per sviluppatori di Firefox, puoi vedere una sovrapposizione che delinea la griglia. Anche Firefox Developer Edition ha questa capacità.

Selezionare la griglia di sovrapposizione che si desidera visualizzare (a seconda del progetto, può essercene più di una). Le impostazioni di visualizzazione della griglia ti consentono di dare un'occhiata più da vicino visualizzando il numero di linea, i nomi delle aree e il modo in cui desideri che le linee si estendano. Questo sarà utile durante la progettazione.

Carte semplici con layout a griglia CSS

Se non conosci CSS Grid, ti consigliamo di rispolverare le basi e creare un semplice CSS Grid Layout. Le schede sono un ottimo modo per visualizzare i contenuti, oltre a un interessante elemento dell'interfaccia utente intuitivo da usare. Forniscono inoltre un ottimo formato per consentire agli utenti di scansionare rapidamente i contenuti e interagire con ciò a cui sono maggiormente interessati. Le schede consentono inoltre ai designer di formattare i contenuti in modo visivamente accattivante, con immagini fantastiche, contenuti introduttivi, collegamenti e altro ancora!

Schede e layout generale della pagina

Per inciso, è importante sapere che CSS Grid non deve essere utilizzato su un intero layout di pagina. Le griglie possono essere utilizzate in determinate aree della pagina, se necessario. Poiché questo è un tutorial sui layout delle carte, un approccio a griglia può essere utilizzato esclusivamente qui anche se il resto della pagina non utilizza CSS Grid. Finché l'area della griglia è definita e display: grid; è dichiarato sul wrapper, è possibile utilizzare questo approccio.

Lavorare con un determinato numero di carte

In alcuni casi, è facile pianificare un determinato numero di carte. Con una determinata quantità di contenuti, il numero di carte rimarrà lo stesso. Ad esempio, potrebbero esserci quattro carte che spiegano le offerte commerciali, con ciascuna offerta sulla propria carta.

Per questo esempio (e per gli altri), tutti gli elementi .card sono all'interno di un elemento contenitore .cards . Per fare questo, è piuttosto semplice.

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

È importante visualizzare il valore di .cards sulla griglia. Senza questo, le aree della griglia non possono essere create. Il prossimo passo è definire le grid-template-columns e scegliere lo stile. Lo stile effettivo della carta sarà dichiarato con una classe di .card .

In questo esempio, vedrai più tag articolo con la classe .card . Guardalo su Codepen.

Ripetere per impostare il numero di carte

È qui che le carte iniziano a prendere forma. Per creare una quantità fluida di colonne per riga, viene utilizzata la ripetizione con la funzione repeat() . Questa funzione accetta due argomenti: il numero di volte da ripetere e il valore da ripetere.

Ad esempio, grid-template-columns: repeat(3, 200px); calcola in grid-template-columns: 200px 200px 200px; .

Unità frazionaria

Vedrai che il codice di esempio utilizza un "fr." Cos'è esattamente? Questa unità di misura è diventata popolare con CSS Grid. Fr significa "unità frazionaria" e 1fr occupa 1 parte dello spazio disponibile. Aiuta a semplificare i calcoli dello spazio.

Le unità frazionarie possono essere utilizzate da sole o ti consentono di specificare una larghezza di 1fr e puoi anche aggiungere elementi figlio. Più fr saranno equamente condivisi tra tutti gli elementi figlio.

È possibile specificare diverse unità frazionarie. Ad esempio, quando le colonne della griglia sono 1fr 2fr 1fr , due unità frazionarie occupano il doppio dello spazio di un'unità frazionaria.

Ripeti per un numero dinamico di carte

In alcuni casi, potresti non conoscere il numero di carte necessarie, quindi pianificare un numero prestabilito non funzionerà. Verrà adottato lo stesso approccio utilizzato per la ripetizione, ma è possibile inserirne quanti ne sono necessari con il riempimento automatico.

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

Le dichiarazioni di larghezza sono necessarie oltre al auto-fill . Tenendo bene a mente, con un valore px, potrebbe esserci spazio a destra quando non c'è abbastanza per far entrare la carta, ma non deve essere così, come vedrai un po' più avanti.

Minmax per un maggiore controllo sulla larghezza della carta

Minmax è la soluzione perfetta, poiché un'unità frazionaria da sola renderebbe le carte a tutta larghezza. L'aggiunta sia di ripetizione che di minmax alla dichiarazione di stile eliminerà il possibile spazio vuoto e le carte appariranno più fluide.

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

Le colonne si adatteranno sempre alla griglia e le carte saranno di almeno 200 px. Quando lo spazio minimo non si adatta perfettamente allo spazio, è qui che entra in gioco la larghezza massima. Quando un'altra carta di 200 px di larghezza non si adatta, le altre carte saranno più grandi di 200 px, quindi si allungheranno per riempire la riga con più spazio e saranno distribuite equamente. [id articolo=”21612″ align=”destra”]

Mobile

Poiché sono state pianificate le carte più piccole e più grandi, questo è un buon momento per parlare di mobile. Le carte funzionano bene su dispositivi sempre più grandi perché il contenuto è in blocchi digeribili e le carte possono facilmente ridimensionarsi. CSS Grid aiuta a creare un'ottima esperienza mobile e, in alcuni casi, è molto più semplice che avere una media query separata.

In questo esempio, le schede devono essere ridimensionate per adattarsi ai dispositivi mobili e ridimensionate per essere una frazione dello spazio disponibile, in modo che vengano visualizzate a larghezza intera su un dispositivo più piccolo, non è necessaria alcuna query multimediale separata:

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

La larghezza minima della carta è 300px. Nella riga appariranno tutte le carte da 300 px che possono adattarsi. Quando il dispositivo è molto piccolo, c'è una buona possibilità che non ci sia lo spazio disponibile per due carte di fila. È allora che entra in gioco l' 1fr . L'unità frazionaria è ottima per i progetti reattivi. Quando due delle carte da 300px non entrano, è qui che la visualizzazione mobile diventa molto evidente. Quando 1fr è stato dichiarato come larghezza massima, una singola carta occuperà tutto lo spazio disponibile e si impilano una sopra l'altra.

Gap di griglia

Ora che la larghezza delle carte è stata stabilita, è necessario prendere la decisione di lasciare spazio tra di loro. Questa proprietà è disponibile sui contenitori griglia e semplifica la creazione di grondaie nel progetto. Grid-column-gap crea lo spazio tra ogni carta. Quando vedi grid-gap , si riferisce alla scorciatoia per grid-row-gap e grid-column-gap . Grid-row-gap è lo spazio in alto e in basso della carta, grid-column-gap è lo spazio a sinistra e a destra della carta.

Risorse per il layout della griglia CSS

Quando si tratta di CSS Grid Layouts, c'è molto da imparare e ci sono molte possibilità. Il modo migliore per conoscere CSS Grid Layout è leggere e sperimentare in più. Ci sono molte ottime risorse là fuori, ma eccone alcune per iniziare:

• Griglia per esempio
• Corso CSS Grid Layout di Wes Bos
• Introduzione di Mozilla alla griglia CSS