In uno dei nostri precedenti tutorial di introduzione a CSS Grid abbiamo guardato le colonne fluide e migliori spaziature. Abbiamo imparato che non è necessario specificare esattamente dove vogliamo posizionare i nostri elementi della griglia; se dichiariamo le proprietà della nostra griglia, Grid posizionerà i nostri elementi in accordo con il suo algoritmo di auto-posizionamento.

In questo tutorial daremo un'occhiata a come tale algoritmo si comporta nel suo lavoro e come possiamo influenzarlo.

Impostazione

Se nel vostro browser non impostate il supporto per Grid è necessario riordinarlo come segue. Leggete questo:

• CSS Grid Layout: Una guida introduttiva veloce

  Come il nostro approccio al layout sul web sta cambiando, e in prima linea di questo cambiamento c'è CSS Grid Layout. Questa guida introduttiva ignorerà i dettagli e...

Tutto è iniziato con una griglia

Ecco una demo di griglia per iniziare; è un contenitore che noi abbiamo dichiarato come display: grid; e ha diciotto elementi figlio. Abbiamo affermato che dovrebbe avere cinque colonne, ciascuna di larghezza uguale, dovrebbe avere almeno la stessa quantità di righe e una spaziatura stretta tutte di 2px.

  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 2px;

Finora tutto bene e si può vedere che Grid ha preso i nostri diciotto elementi e li ha schiacciati, lavorando dall'alto a sinistra, spostandosi verso destra, poi si spostando verso il basso riga per riga. Questo comportamento è molto simile a quella dei float.

Nota: il comportamento da sinistra a destra potrebbe essere invertito se avevamo a che fare con un layout a direction: RTL;.

Mandare tutto all'aria

Questo è tutto bello e pulito, ma vediamo che cosa succede quando i nostri elementi non si adattano perfettamente. A .item-7 aggiungeremo alcune regole per renderlo più grande misurando due colonne e due righe:

.item-7 {
  background: #e03f3f;
  grid-column: span 2;
  grid-row: span 2;
}

Come sembra in questo momento?

Non male! .item-7 riempie più spazio, così .item-8 e .item-9 sono posizionati ulteriormente. .item-10 poi sembra vedere se c'è uno spazio libero accanto a .item-9, e quando vede che non c'è si muove verso il basso di una riga e inizia di nuovo all'estrema sinistra. Gli altri elementi continuano a infilarsi nello stesso modo.

Ma aspettate, cosa succede se rendiamo anche .item-9 un po' sovrappeso?

Ora si fa interessante; .item-9 non si adatta più nella colonna alla fine così è spinto verso il basso nella riga successiva. Come non può adattarsi oltre .item-7 che rimane fermo. .item-10, si può immaginare, infilerebbe sé stesso sotto .item-6 ancora una volta, ma, se vi ricordate, ricercherà una colonna vacante, non riuscendoci quindi si muove verso il basso di una riga e si sposta tutto a sinistra nuovamente. Si tratta di un concetto importante da cogliere.

Dite "Ciao" a grid-auto-flow

Se guardate la demo precedente vedrete che .item-18, non riuscendo a trovare spazio accanto a .item-17, si è spostato verso il basso di una riga. Abbiamo definito effettivamente solo cinque righe, ma Grid ha assunto che ci vorrà un'altra riga su cui agganciarsi. Questo è dovuto a grid-auto-flow, che appartiene all'elemento grid, e il cui valore predefinito è row. Possiamo cambiare questo valore a column se vogliamo, che modificherebbe totalmente l'aspetto della nostra griglia:

Sembra una sorta di simile, ma si noterà che i nostri elementi si sono inseriti in alto a sinistra, quindi si è spostato verso il basso a riempire la riga, quindi ha attraversato la seconda colonna e così via. Quindi ora quando un elemento è troppo grande, l'elemento seguente ricerca il prossimo spazio vacante della riga, poi fallendo questo spostamento sopra alla colonna successiva.

Denso ha un senso

re un'altra parola chiave alla nostra proprietà grid-auto-flow, e forse è la mia parola chiave CSS preferito fino ad oggi: dense. La sua controparte predefinita è sparse (la mia seconda preferita). Facciamo come segue:

grid-auto-flow: row dense;

Nota: non abbiamo bisogno di includere row qui, è implicito, ma questo mette in evidenza come funziona la sintassi.

Ora il nostro amico .item-10, dopo aver scoperto che non c'è spazio accanto a .item-9, controllate innanzitutto che cosa è sopra prima di muoversi su un'altra riga.

Grazie a questo cambiamento nell'algoritmo di posizionamento i nostri elementi sono ora densamente compatti, che ci dà una griglia riempita in modo più efficiente. Ciò significa, tuttavia, che il layout visivo non necessariamente riflette l'ordine di origine del documento, che non può sempre essere utile all'utente.

Conclusione

Ricapitoliamo:

1. Se non abbiamo definito in modo specifico la posizione di un elemento, l'algoritmo di auto-posizionamento di Grid si inserirà nel successivo slot disponibile (e abbastanza grande).
2. Dove non c'è nessuno slot disponibile nella riga corrente, inizierà la ricerca nella riga seguente, anche se lascia degli spazi.
3. Possiamo passare questo ordine di ricerca modificando la grid-auto-flow da row a column.
4. grid-auto-flow accetta una parola chiave per descrivere l'approccio di "imballaggio". Per impostazione predefinita, questo valore è sparse, ma possiamo modificare questo a dense che tenta di riempire tutti gli spazi disponibili.
   

Risorse utili

• grid-auto-flow su MDN
• La specifica della proprietà grid-auto-flow