Accentsconagua
Share
In uno dei nostri primi tutorial introduttivi su CSS Grid abbiamo esaminato colonne fluide e grondaie migliori. Abbiamo appreso che non è necessario specificare esattamente dove vogliamo posizionare i nostri elementi della griglia; se dichiariamo le proprietà della nostra griglia, Grid inserirà i nostri elementi in base al suo algoritmo di posizionamento automatico.
In questo tutorial daremo un'occhiata a come questo algoritmo si basa sul suo lavoro e su come possiamo influenzarlo.
Se il tuo browser non è configurato per supportare Grid dovrai sistemarlo per seguirlo. Leggi questo:
Ecco una griglia dimostrativa per dare il via alle cose; è un contenitore che abbiamo dichiarato di essere display: grid; e contiene diciotto elementi figlio. Abbiamo dichiarato che dovrebbe avere cinque colonne, ciascuna di uguale larghezza, almeno la stessa quantità di righe e una stretta grondaia di tutto 2px.
grid-template-columns: repeat (5, 1fr); grid-template-rows: repeat (5, 1fr); intercapedine: 2px;
Fin qui tutto bene, e puoi vedere che Grid ha preso i nostri diciotto oggetti e li ha spinti dentro, lavorando dall'angolo in alto a sinistra, spostandosi verso destra, per poi scendere riga per riga. Questo comportamento è molto simile al modo in cui i float funzionano.
Nota: il comportamento da sinistra a destra sarebbe invertito se avessimo a che fare con un direzione: RTL; disposizione.
È tutto bello e pulito, ma vediamo cosa succede quando i nostri articoli non si adattano perfettamente. A .item-7 aggiungeremo alcune regole per renderlo più grande estendendo due colonne e due righe:
.item-7 background: # e03f3f; grid-column: span 2; grid-row: span 2;
Come sembra ora?
Non male! .item-7 riempie più spazio, quindi .item-8 e .item-9 sono posizionati oltre. .item-10 poi guarda se c'è uno spazio vuoto accanto a .item-9, e quando vede non c'è mossa giù una riga e ricomincia dall'estrema sinistra. Gli altri oggetti continuano ad essere inseriti nello stesso modo.
Ma aspetta, e se lo facciamo anche noi .item-9 un po 'sovrappeso?
Ora diventa interessante; .item-9 non si inserisce più nella colonna alla fine, quindi viene spostato nella riga successiva. Come non può adattarsi a qualcosa di oltre .item-7 rimane messo. .item-10, potresti immaginare, si infilerebbe sotto .item-6 di nuovo, ma, se ricordi, cerca una colonna vuota, quindi non si muove giù di fila e shunts di nuovo a sinistra. Questo è un concetto importante da comprendere.
Se guardi la demo precedente lo vedrai .item-18, non riuscendo a trovare spazio accanto a .item-17, è sceso di fila. Abbiamo solo definito cinque righe, ma Grid ha pensato che avremmo voluto aggiungere un'altra riga. Questo è dovuto a grid-auto-flow, che appartiene all'elemento grid e il cui valore predefinito è riga. Possiamo cambiare questo valore in colonna se vogliamo, che cambierebbe totalmente il modo in cui appare la nostra griglia:
Questo sembra una specie di simile, ma noterete che i nostri articoli sono stati inseriti in alto a sinistra, quindi spostati in basso per riempire ogni riga, quindi spostati nella seconda colonna e così via. Così ora, quando un oggetto è troppo grande per i suoi stivali, il seguente oggetto cerca il successivo spazio di riga libero, quindi non riesce a passare alla colonna successiva.
Possiamo aggiungere un'altra parola chiave al nostro grid-auto-flow proprietà, ed è probabilmente la mia parola chiave CSS preferita fino ad oggi: denso. La sua controparte predefinita è scarso (il mio secondo preferito). Facciamo quanto segue:
grid-auto-flow: row denso;
Nota: non abbiamo bisogno di includere riga qui, è implicito, ma questo evidenzia come funziona la sintassi.
Ora il nostro amico .item-10, dopo aver scoperto che non c'è spazio accanto .item-9, prima controlla cosa c'è sopra prima di passare ad un'altra fila.
Grazie a questo cambiamento nell'algoritmo di posizionamento, i nostri articoli sono ora densamente imballati, il che ci dà una griglia più efficiente. Ciò significa, tuttavia, che il layout visivo non riflette necessariamente l'ordine dell'origine del documento, che potrebbe non essere sempre utile per l'utente.
Ricapitoliamo:
grid-auto-flow a partire dal riga a colonna.grid-auto-flow accetta una parola chiave per descrivere l'approccio "imballaggio". Di default questo valore è scarso, ma possiamo modificarlo denso che tenta di colmare tutte le lacune disponibili.