Come utilizzare il ridimensionamento della traccia implicita del vostro CSS Grid

Fino ad ora i nostri tutorial della griglia CSS sono concentrati in gran parte su valori espliciti – la dimensione della traccia che abbiamo definito in modo esplicito. Abbiamo usato le righe che sono alte 200px, o forse le colonne che sono ampie 1fr, e abbiamo esplicitamente dichiarato quanti di loro ne vogliamo. Ma cosa succede se non sappiamo (o non vogliamo impegnarci) quante tracce vogliamo? È dove i valori impliciti entrano in gioco – diamo un'occhiata.

Starter Grid

Ecco una griglia di base di cui potete fare un fork da seguire. Ci dà un contenitore della griglia, con 9 elementi della griglia. Nessuna larghezza o quantità delle colonne sono state ancora definite, quindi ogni elemento riempie la larghezza massima disponibile:

Definire solo una colonna

Immaginiamo che vogliamo una colonna a sinistra, e che sappiamo esattamente quanto larga la vogliamo: 300px. Possiamo definire che aggiungendo grid-template-columns: 300px; al nostro contenitore della griglia. Ma non riceverà altre colonne a meno che non li definiamo in modo esplicito:

Vale a dire, a meno che non esplicitamente diciamo che vogliamo uno degli elementi della griglia siano inseriti (ad esempio) sulla colonna 3 riga 1:

.item-3 {
  grid-column: 3;
  grid-row: 1;
}

Questo poi ci dà colonne supplementari all'esterno della nostra griglia definita poiché CSS Grid utilizzerà lo spazio disponibile e il suo algoritmo di auto-posizionamento per capire dove va tutto il resto.

Questo è grande, e Grid farà delle supposizioni anche se vogliamo avere più colonne, senza dover definire ciascuna. Ma cosa succede se vogliamo quelle tracce implicite, tuttavia molti ci sono, per avere una larghezza specifica? Che è dove la grid-auto-columns entra in gioco.

Dite "Ciao" a grid-auto-columns

Se vogliamo che tutte le colonne oltre la prima ad essere ampia 100px, potremmo implicitamente affermare che:

grid-auto-columns: 100px;

Accoppiato con il nostro valore esplicito, otteniamo il meglio possibile da entrambi. Qui stiamo dicendo che vogliamo che la prima colonna sia 1fr (che prende una frazione di qualunque spazio è sinistra – auto avrebbe lo stesso effetto qui) e che tutte le altre colonne dopo questo dovrebbero essere proprio 100px:

grid-template-columns: 1fr;
grid-auto-columns: 100px;

Questo ci dà il seguente:

E se affermiamo che tale elemento 3 in realtà dovrebbe essere messo in colonna 1, su riga 5, Grid sa quanto ampie fare le colonne aggiuntive, perché è implicito.

Non siamo limitati a valori di pixel neanche qui; potremmo utilizzare unità frazionarie, unità em, anche la notazione minmax() che abbiamo discusso nei precedenti tutorial.

Senza dimenticare grid-auto-rows

Quasi inutile dire che grid-auto-rows farà lo stesso per le righe come grid-auto-columns fa per le colonne. Ecco un esempio, dove tutte le righe tranne le prime due sono fissate a un'altezza di 200px.

Conclusione

Molte delle proprietà di Grid hanno valori predefiniti che si occuperà di voi nel caso in cui non definite qualcosa di diverso, ma in alcune occasioni abbiamo bisogno di almeno suggerire quello che vogliamo. Con dimensionamento della traccia implicita possiamo suggerire quale dimensione dovrebbero essere ulteriori righe o colonne, se mai sono necessarie.

Per saperne di più

• Specifiche del dimensionamento della traccia implicito