In questo tutorial prenderemo la griglia dal nostro precedente tutorial e la useremo come un parco giochi per approfondire Grid. Miglioreremo il modo di definire le nostre spaziature, esploreremo i layout flessibili, l'unità fr e introdurremo la funzione repeat().

Unità flessibili

L'intero punto di Grid è quello di consentirci di controllare correttamente i layout sul web, quindi rendiamo fluida la nostra griglia statica prima di andare avanti. Se vi ricordate, noi stavamo definendo la nostra griglia con misurazioni in pixel statici:

grid-template-columns: 150px 20px 150px 20px 150px;
grid-template-rows: auto 20px auto 20px auto;

È possibile utilizzare anche altre unità qui, come ems, o rems per esempio. O persino unità ancor più insolite come vh e vmin.

In questo caso modificheremo la nostra unità in pixel a favore delle percentuali. Poiché stiamo definendo la larghezza delle nostre colonne e la larghezza delle nostre spaziature manualmente dobbiamo assicurarci che i valori totali siano uguali al 100%:

grid-template-columns: 30% 5% 30% 5% 30%;

Attenzione alla distanza

Esiste un modo più recente, più efficiente per dichiarare le misure delle spaziature, e cioè con una proprietà appositamente creata. Possiamo usare grid-column-gap e grid-row-gap o invece la proprietà abbreviata grid-gap.

Utilizzare questo significa che non abbiamo più bisogno di includere i tracciati di grid per ospitare le nostre spaziature, abbiamo solo bisogno di dichiarare le colonne e le righe, quindi nel nostro caso significa tre di ciascuno:

  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: auto auto auto;

Hmm, è un po' disordinato, ma fa abbastanza il suo lavoro. La differenza che noterete è che la larghezza delle colonne ora aggiunge fino al 100%; le nostre spaziature in realtà saranno sottratte da loro automaticamente.

Repeat

Scriviamolo in un modo più ordinato, utilizzando la funzione repeat():

grid-template-columns: repeat(3, 33.33%);

Questo afferma "ripetere 33,33% tre volte" dandoci tre colonne. E non abbiamo nemmeno bisogno della dichiarazione grid-template-rows perché comunque il valore auto è assegnato come predefinito. Ora abbiamo solo bisogno di dichiarare quanto grande vogliamo le nostre spaziature:

  grid-template-columns: repeat(3, 33.33%);
  grid-gap: 20px;

grid-gap accetterà un'unità fissa o flessibile, il che significa che possiamo combinare perfettamente le colonne fluide e le spaziature fisse senza eventuali calcoli complessi da parte nostra.

Reimpostiamo i nostri valori grid-column e grid-row

Qualcosa non va: abbiamo ancora un carico di dichiarazioni di grid-column e di grid-row sui nostri elementi del grid, ma sono tutte sbagliate perché non abbiamo più molti tracciati di grid. Fortunatamente, perché stiamo usando grid-gap per definire le nostre spaziature, possiamo lasciare il posizionamento degli elementi al posizionamento automatico – gli elementi non cadranno più nelle spaziature. Per ora, rimuoviamo tutto il posizionamento:

L'unità fr

Un miglioramento finale può essere fatto alla nostra semplice griglia; stiamo introducendo fr, o unità frazionaria. Una singola unità fr descrive "un pezzo di comunque molti pezzi in cui lo stiamo dividendo". Ad esempio, potremmo dichiarare le nostre colonne utilizzando:

  grid-template-columns: 1fr 1fr 1fr;

Qui c'è un totale di tre unità fr, quindi ogni colonna sarebbe ampia un terzo. Ecco un altro esempio:

  grid-template-columns: 2fr 1fr 1fr

Ora c'è un totale di quattro unità fr, quindi la prima colonna avrebbe preso metà della larghezza disponibile, con le altre due colonne ognuna prendendo un quarto.

Queste unità sono davvero potenti, specialmente in combinazione con altre unità di misura:

grid-template-columns: 300px 1fr 3fr 20%;

Qui abbiamo dichiarato quattro colonne:

• la prima è fissa ampia 300px
• l'ultima è ampia un 20% flessibile dell'elemento contenitore di grid
• poi vengono calcolate le unità fr, lasciando la seconda colonna con un pezzo dello spazio rimanente
• e la terza con tre pezzi.

Ha questo aspetto, perfettamente evidenziando l'auto-posizionamento poiché i nostri nove elementi si spostano per colmare i vuoti:

Ma torniamo alla nostra griglia originale. Cerchiamo di sostituire il valore goffo e impreciso di 33,33% con 1fr:

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

Pen finita:

Conclusione

Quindi, per ricapitolare:

1. Grid accetterà unità di misurazione flessibili in combinazione con unità fisse.
2. Non abbiamo bisogno di dichiarare le spaziature all'interno del nostro grid-template, possiamo utilizzare invece la proprietà grid-gap.
3. grid-gap significa che siamo meno legati al posizionamento dei nostri gli elementi della griglia  – possiamo consegnare più responsabilità all'auto-posizionamento.
4. La funzione repeat() ci salverà tempo e manterrà i nostri fogli di stile gestibili.
5. fr, o unità frazionaria è un modo molto potente per descrivere modelli di griglia.

Abbiamo fatto una lunga strada in solo due tutorial, ma ora siete gli orgoglioso proprietari di una griglia molto ordinata e concisa! Nel prossimo tutorial esploreremo le aree della griglia, daremo un'occhiata alla parola chiave span e ad alcuni pratici layout.

Risorse utili

• Il tipo <fraction> e l'unità fr su W3C
• Ancora una volta, seguite @rachelandrew