Share
È abbastanza possibile utilizzare il posizionamento CSS sugli elementi della griglia, proprio come faresti con la maggior parte degli altri elementi. Ci sono una o due stranezze, comunque, quindi diamo una rapida occhiata per assicurarci di evitare le insidie.
Iniziamo con una griglia semplice, con nove elementi, disposti in tre colonne. Ogni colonna è larga 1fr, tranne la terza colonna che (grazie a minimo Massimo()) si restringe non inferiore a 160 px:
grid-template-columns: 1fr 1fr minmax (160px, 1fr);
Aggiungendo un paio di regole a uno degli elementi, possiamo posizionarlo relativamente:
.item-2 position: relative; a destra: 100 px; superiore: 30 px;
Quindi, proprio come potremmo aspettarci, lo dichiariamo item-2 deve essere posizionato relativamente, quindi definire alcune proprietà di offset (anche se non provare a utilizzare l'unità fr su questi, non funzionerà).
Noterai, se ridimensioni la finestra, che l'oggetto della griglia continua a comportarsi (ridimensionato) esattamente com'era prima che lo riposizionassimo, ed è ancora, egoisticamente, riservando il suo posto nella griglia nel caso in cui voglia tornare.
Quindi cosa succede quando noi assolutamente posizionare quell'elemento? In primo luogo, si posizionerà contro il suo antenato più vicino che ha un valore di posizione dichiarato. Se non si imposta posizione: relativa; (ad esempio) sul contenitore della griglia, l'elemento della griglia volerà fuori dai limiti della griglia alla ricerca di qualcos'altro da trattenere, come l'elemento html.
Nella demo precedente vedrai che l'oggetto è ora posizionato in assoluto 100 px da sinistra e 30 px dalla parte superiore del contenitore della griglia. È stato effettivamente rimosso dal flusso del documento, come è normale con elementi posizionati in modo assoluto. La sua fessura nella griglia è stata riempita da item-3 e gli altri oggetti si sono posizionati per riempire gli spazi rimanenti.
Nota: se il nostro contenitore di griglia dovesse avere padding, il posizionamento sarebbe in relazione a quei confini esterni di imbottitura.
Vedrai anche che non ha più le dimensioni che stava usando quando faceva parte della griglia. Si è ridotto alle dimensioni del suo contenuto. La griglia non influenza il dimensionamento dell'elemento e l'elemento non influenza in alcun modo il dimensionamento della griglia.
Potrebbe essere necessario un po 'di tempo per abituarsi, ma oltre ai normali offset è anche possibile posizionare una griglia usando le proprietà di posizionamento della griglia. Per esempio, mettiamo il nostro item-2 assolutamente acceso grid-area: 3/2; (in altre parole, iniziando dalla terza riga in basso e la seconda riga della colonna).
Sembra strano, ma puoi vedere che l'oggetto, ancora non influenzato dal dimensionamento della griglia e ancora fuori dal flusso, si è posizionato bruscamente in cima item-9. È come se avesse una griglia tutta sua, in cima all'originale.
Nota: z-index ti consentirà di modificare l'ordine di sovrapposizione degli articoli, se lo desideri.
Andando avanti, se poi aggiungiamo un offset nel mix (top: 50px; ad esempio) il nostro articolo applicherà quell'offset, pur rimanendo fedele al proprio posizionamento di griglia immaginario:
Nel nostro tutorial precedente abbiamo parlato di come creerà Grid implicito tracce se sono necessari; Tracce oltre quelle che definiamo esplicitamente. Possiamo posizionare gli elementi su quelle tracce di griglia implicite se esistono, ma Grid no creare quelle tracce per elementi al di fuori del flusso.
Nella demo qui sotto, abbiamo posizionato item-2 sopra grid-area: 2/4; ma questo è possibile solo perché item-6, che è ancora nel flusso, ha già richiesto a Grid di creare quelle tracce extra per noi.
Perché dovresti aver bisogno di posizionarti con Grid? Inizialmente potrebbe sembrare eccessivo. Ma quando consideri i layout della griglia guasti e passi oltre le semplici pagine "across e down" a cui ci siamo abituati, penso che troverai il posizionamento abbastanza utile.
Accentsconagua