Spostamento di elementi nel layout griglia CSS [Guida]
Usando il Modulo layout griglia CSS nel web design diventa sempre più fattibile con l'arrivo di più browser supportalo. Durante la creazione di layout che riempiono le celle della griglia, potrebbe tuttavia venire un momento in cui si desidera ottenere cose più complicate.
Ad esempio, potresti volerlo spostati leggermente alcuni degli elementi della griglia bloccati nelle loro aree della griglia. Potresti anche volerlo spostali fuori dal contenitore della griglia (eccedenza), o uno sopra l'altro (si sovrappongono), o semplicemente ... a qualche spazio vuoto intorno.
Quindi, in questo post, ti mostrerò come puoi spostare, ordinare, overflow, sovrapporre e dimensionare gli elementi della griglia quando si utilizza il modulo layout griglia CSS.
Crea una griglia CSS
Per prima cosa, creiamo una semplice griglia CSS con una riga e tre colonne.
Nel codice HTML, creiamo un gruppo di div in cui il contenitore della griglia contiene i tre elementi della griglia.
Nel CSS, il contenitore della griglia ha il display: grid; proprietà e gli elementi della griglia avere grid-zona che identifica i nomi delle aree degli elementi della griglia.
Anche noi Aggiungi il Grid-template-aree proprietà al contenitore della griglia, in cui vengono utilizzati i nomi delle aree della griglia assegnare le aree della griglia alle celle della griglia che rappresentano.
Tutte le colonne prendi le dimensioni di una frazione (fr) della larghezza del contenitore, garantendo il contenimento degli elementi della griglia.
.grid-container display: grid; grid-template-areas: 'left center right'; grid-template-columns: repeat (3, 1fr); grid-template-rows: 80px; intercapedine: 5px; larghezza: 360px; colore di sfondo: magenta; .grid-left grid-area: left; .grid-center grid-area: center; .grid-right grid-area: right; .grid-container div background-color: lightgreen;
Overflow grid items
Puoi creare una griglia traboccare il suo contenitore della griglia se è necessario per un layout. Per ottenere l'effetto di overflow, è sufficiente usa una diversa dimensione della colonna:
.grid-container display: grid; grid-template-areas: 'left center right'; grid-template-columns: repeat (3, 150px); intercapedine: 5px;
Il somma della dimensione della colonna e del gap è più grande del larghezza del contenitore, il che fa sì che gli elementi della griglia trabocchino il loro contenitore.
Sovrapponi gli elementi della griglia
UN l'elemento griglia può sovrapporsi (copertura totale o parziale) un altro elemento della griglia nei seguenti casi:
- È impostato per attraversare (e oltre) le celle di un altro elemento della griglia.
- La sua dimensione è stata aumentata, causando la sovrapposizione con la griglia vicina.
- Viene spostato sopra a un altro elemento della griglia.
Discuteremo il secondo e il terzo caso più tardi, nel “dimensionamento” e “In movimento” sezioni.
Innanzitutto, vediamo il primo caso quando un elemento della griglia si estende su un altro.
L'elemento griglia al centro ha spanning su quello di sinistra, quindi solo due elementi sono visibili sullo schermo.
.grid-center grid-area: center; grid-column: 1/3;
Il grid-column e grid-fila proprietà assegna linee di griglia tra cui una colonna o una riga deve adattarsi.
Sul diagramma sottostante, puoi vedere come grid-column: 1/3 La regola CSS funziona: la colonna centrale si estende tra le linee della griglia 1 e 3. Di conseguenza, la colonna centrale si sovrappone a quella a sinistra.
Sposta gli elementi della griglia
Spostando, intendo spostando leggermente gli oggetti. Se si desidera spostare completamente un oggetto in un'altra cella / area della griglia, si consiglia di aggiornare il codice di creazione della griglia.
Spostarsi attorno agli elementi della griglia è semplice. Appena utilizzare il margine, il trasformare, o il position: relative; proprietà. Vedi sotto come gli oggetti vengono spostati usando quelle proprietà.
Gli elementi della griglia centrale e destra possono essere spostati (come mostrato sopra) nei seguenti modi:
1. Uso margine
I margini negativi aumentano le dimensioni degli elementi della griglia, mentre i margini positivi li tagliano. Usando una combinazione di entrambi, puoi spostare leggermente gli elementi della griglia.
.grid-center grid-area: center; margin-left: -10px; margin-right: 10px; margin-top: -10px; margin-bottom: 10px; .grid-right grid-area: right; margin-left: 10px; margine-destra: -10px; margin-top: -10px; margin-bottom: 10px;
2. Uso trasformare
Il tradurre() Funzione CSS muove un elemento lungo gli assi xey. Usandolo insieme al trasformare proprietà consente di modificare la posizione di un elemento della griglia.
.grid-center grid-area: center; transform: translate (-10px, -10px); .grid-right grid-area: right; transform: translate (10px, -10px);
3. Uso posizione
Usando il posizione: relativa; regola con il specificato superiore, parte inferiore, sinistra, e destra le proprietà possono essere utilizzate anche per spostarsi attorno agli elementi della griglia.
.grid-center grid-area: center; posizione: relativa; fondo: 10px; a destra: 10px; .grid-right grid-area: right; posizione: relativa; fondo: 10px; a sinistra: 10px;
Ordina elementi della griglia
Gli oggetti griglia vengono visualizzati sullo schermo nell'ordine in cui appaiono nel codice sorgente HTML.
Nella sezione precedente, quando l'oggetto centrale è stato spostato a sinistra, è stato posizionato sopra l'elemento sinistro dal browser. Questo è successo perché nell'HTML, Tuttavia, possiamo modificare gli elementi della griglia dell'ordine usando il Usando il Come nel modulo Layout griglia CSS, cambiando l'ordine degli elementi in HTML non influisce sul layout della griglia, puoi anche metterlo Se si utilizzano righe o colonne di dimensioni automatiche per un elemento della griglia (utilizzando Ricorda, nella nostra griglia di esempio, tutte e tre le colonne prendono una frazione ( Qui, cambiamo le dimensioni dell'elemento sinistro usando il Qui, cambiamo le dimensioni dell'elemento sinistro usando il z-index o il ordine Proprietà CSS.
z-index: 1; regola, la griglia sinistra ha un contesto di stacking più elevato.. grid-left grid-area: left; z-index: 1;
Dimensione elementi della griglia
auto, fr, gr unità), si ridurrà per fare spazio al suo oggetto vicino che è cresciuto in dimensioni solo se detto oggetto non è stato ridimensionato da trasformare o un margine negativo.fr) del contenitore della griglia. Dai un'occhiata a come appaiono tutti e tre gli oggetti dopo che quello di sinistra è stato ridimensionato in due modi diversi.1. Dimensioni con
larghezza e altezzalarghezza e altezza proprietà. Di conseguenza, rimane all'interno del contenitore della griglia.
.grid-left grid-area: left; larghezza: 200 px; altezza: 90 px;
2. Dimensioni con
trasformaretrasformare proprietà. Di conseguenza, trabocca il contenitore e anche il gap della griglia scompare.
.grid-left grid-area: left; transform: scalex (1.8);
