Share
Fino ad ora i nostri tutorial sulla griglia CSS si sono concentrati in gran parte esplicito valori: traccia le dimensioni che abbiamo esplicitamente definito. Abbiamo usato righe alte 200 px, o forse colonne di 1 livello di larghezza, e abbiamo esplicitamente dichiarato quanti di loro vogliamo. Ma cosa succede se non sappiamo (o non vogliamo impegnarci) quante tracce vogliamo? Ecco dove implicito i valori entrano in gioco, diamo un'occhiata.
Ecco una griglia di base che puoi biforcarti per seguire. Ci dà un contenitore di griglia, con 9 elementi di griglia. Nessuna larghezza o quantità di colonne è stata ancora definita, quindi ogni elemento riempie la larghezza massima disponibile:
Immaginiamo di volere una colonna a sinistra e che sappiamo esattamente quanto lo vogliamo: 300px. Possiamo definirlo aggiungendo grid-template-columns: 300px; al nostro contenitore della griglia. Ma a noi non verranno date altre colonne se non noi espressamente definiscili:
Cioè, a meno che non diciamo che vogliamo che uno degli elementi della griglia sia inserito (per esempio) nella colonna 3 della riga 1:
.item-3 grid-column: 3; grid-row: 1;
Questo ci dà quindi colonne in più al di fuori la nostra griglia definita perché CSS Grid userà lo spazio disponibile e il suo algoritmo di auto-posizionamento per capire dove va tutto il resto.
Questo è grandioso e Grid formulerà delle ipotesi anche se desideriamo avere più colonne, senza doverle definire ognuna. Ma cosa succede se vogliamo che quelle tracce implicite, per quanto ci siano, abbiano una larghezza specifica? Ecco dove grid-auto-colonne entra in gioco.
Se vogliamo che tutte le colonne oltre alla prima siano ampie 100px, possiamo implicitamente affermare che:
grid-auto-columns: 100px;
In coppia con il nostro valore esplicito, otteniamo il meglio da entrambi i mondi. Qui stiamo dicendo che vogliamo che la prima colonna sia 1FR (che occupa una frazione di qualunque spazio rimanga-auto avrebbe lo stesso effetto qui) e che qualsiasi altra colonna dopo dovrebbe essere 100px precisamente:
grid-template-columns: 1fr; grid-auto-columns: 100px;
Questo ci dà il seguente:
E se affermiamo che l'articolo 3 deve essere effettivamente inserito nella colonna 5, nella riga 1, Grid sa quanto è ampio fare le ulteriori colonne perché è implicito.
Anche qui non siamo limitati ai valori dei pixel; potremmo usare unità di frazione, unità di em, anche il minimo Massimo() notazione di cui abbiamo discusso in precedenti tutorial.
È quasi inutile dirlo grid-auto-righe farà lo stesso per le righe come grid-auto-colonne fa per colonne. Ecco un esempio, in cui tutte le righe tranne le prime due sono fissate ad un'altezza di 200px.
Molte delle proprietà di Grid hanno valori predefiniti che si prenderanno cura di te nel caso in cui non definissi nulla di diverso, ma in alcune occasioni dobbiamo almeno implicare ciò che vogliamo. Con il ridimensionamento implicito della traccia possiamo implicare quale dimensione debbano essere le righe o le colonne aggiuntive, se mai saranno necessarie.
Accentsconagua