Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

Le stranezze di CSS Grid e il posizionamento assoluto

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
How to Use Implicit Track Sizing on Your CSS Grid
Save Time With the CSS “grid” Shorthand Property

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

È possibile utilizzare il posizionamento CSS su elementi della griglia, proprio come faresti con la maggior parte degli altri elementi. Ci sono uno o due stranezze, tuttavia, quindi diamo una rapida occhiata per assicurarsi di evitare le insidie.

Posizionamento relativo semplice

Iniziamo con una semplice griglia, con nove elementi, disposti in tre colonne. Ogni colonna ampia è 1fr, a eccezione della terza colonna che (grazie a minmax()) si ridurrà non più piccola di 160px:

Con l'aggiunta di un paio di regole a uno degli elementi, possiamo posizionarlo relativamente:

Proprio come ci si potrebbe aspettare, noi dichiariamo che item-2 è posizionato relativamente, poi definiamo alcune proprietà di offset (anche se non provate a utilizzare l'unità fr su questi, non funzionerà).

Noterete che, se si ridimensiona la finestra, che l'elemento della griglia continua a comportarsi (ridimensionarsi) esattamente come era prima che lo avessimo riposizionato, ed è ancora, egoisticamente, riservando il suo posto nella griglia nel caso in cui provi a tornare.

Posizionamento assoluto leggermente più complesso

Cosa accade quando posizioniamo assolutamente tale elemento? In primo luogo, esso si posizionerà vicino al suo antenato più vicino che ha un valore di posizione dichiarato. Se non impostate position: relative; (per esempio) per il contenitore della griglia, l'elemento della griglia volerà fuori i confini della griglia in cerca di qualcos'altro a cui aggrapparsi, come ad esempio l'elemento html.

Vedrete nella demo qui sopra che l'elemento è ora posizionato in modo assoluto 100px da sinistra e 30px dalla parte superiore del contenitore grid. È stato rimosso efficacemente dal flusso del documento, come è normale con elementi con posizionamento assoluto. Il suo alloggiamento nella griglia è stato riempito da item-3 e gli altri elementi si sono messi a riempire gli spazi ancora esistenti.

Nota: se il nostro contenitore di griglia dovesse avere dello spazio, il posizionamento sarebbe in relazione a quei confini dello spazio esterno.

Vedrete anche che non ha più le dimensioni che usava quando era parte della griglia. Si è ridotto alla dimensione del suo contenuto. La griglia non influenza il dimensionamento dell'elemento e l'elemento non influenza il dimensionamento della griglia in alcun modo.

Posizionamento assoluto all'interno della griglia

Potrebbe volerci un po' per abituarsi, ma oltre gli offset normali è anche possibile posizionare un elemento della griglia utilizzando le proprietà di posizionamento della griglia. Ad esempio, mettiamo il nostro item-2 assolutamente su grid-area: 3 / 2; (in altre parole, inizia sulla terza riga verso il basso e attraverso la seconda colonna della linea).

Sembra strano, ma si può vedere che l'elemento, ancora non influenzato dal dimensionamento della griglia e ancora fuori dal flusso, si è posizionato bruscamente in cima di item-9. È come se avesse una griglia tutta propria, sulla parte superiore dell'originale.

Nota: z-index vi permetterà di modificare l'ordine di sovrapposizione degli elementi, se si desidera.

Andando avanti, se poi aggiungiamo un offset nel mix (top: 50px; ad esempio) il nostro elemento applicherà tale offset, pur rimanendo fedele al proprio posizionamento inesistente nella griglia:

Una nota sulla griglia implicita

Nel nostro precedente tutorial abbiamo parlato di come Grid creerà tracce implicite se sono necessarie; le tracce oltre quelle che definiamo in modo esplicito. Noi possiamo posizionare gli elementi in quelle tracce implicite della griglia se esistono, ma Grid non creerà quelle tracce per gli elementi al di fuori del flusso.

Nella demo qui sotto, abbiamo posizionato item-2 su 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.

Conclusione

Perché avete bisogno del posizionamento con Grid? Inizialmente potrebbe sembrare eccessivo. Ma quando si considera il layout della griglia rotto e andando oltre il semplice "su e giù" delle pagine web a cui siamo abituati, penso che troverete il posizionamento piuttosto utile.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.