Flytte elementer i CSS Grid Layout [Guide]

Bruke CSS Grid Layout Module i webdesign blir mer og mer mulig som flere nettlesere begynner å støtte den . Mens du lager oppsett som fyller i rutenett, kan det komme et øyeblikk når du vil oppnå mer kompliserte ting.

For eksempel vil du kanskje litt bevege deg rundt noen av rutenettene som ligger i rutenettene. Du vil kanskje også flytte dem ut av rutenettbeholderen (overløp), eller over hverandre (overlapp), eller bare ... til noe tomt rom rundt.

Så, i dette innlegget, vil jeg vise deg hvordan du kan flytte, bestille, overflyte, overlappe og størrelse gridelementer når du bruker CSS Grid Layout Module.

Opprett et CSS-nett

La oss først lage et enkelt CSS-nett med en rad og tre kolonner .

I HTML oppretter vi en gruppe divs der gridbeholderen inneholder de tre gridelementene .

I CSS har nettbeholderen display: grid; eiendom og rutenettene har grid-area som identifiserer navnene på rutenettelementområdene.

Vi legger også til grid-template-areas egenskapen til gridbeholderen, der gridområdene brukes til å tilordne gridområdene til gridcellene de representerer .

Alle kolonnene har størrelsen på en brøkdel ( fr ) på beholderbredden, og sikrer inneslutning av rutenettene.

 .grid-container {display: grid; grid-template-områder: "venstre midt høyre"; Rutenett-mal-kolonner: Gjenta (3, 1fr); rutenett-mal-rader: 80px; grid-gap: 5px; bredde: 360px; bakgrunnsfarge: magenta; } .grid-left {grid-area: left; } .grid-center {grid-area: center; } .grid-right {grid-area: right; } .grid-container div {bakgrunnsfarge: lysegrønn; } 

Overflow grid elementer

Du kan få et rutenett overflyttet sin rutenettbeholder hvis det er nødvendig for et oppsett. For å oppnå overløpseffekten trenger du bare å bruke en annen kolonnestørrelse :

 .grid-container {display: grid; grid-template-områder: "venstre midt høyre"; Rutenettmall-kolonner: Gjenta (3, 150px); grid-gap: 5px; } 

Summen av kolonne- og gapstørrelsen er større enn beholderens bredde, noe som medfører at gridelementene overlater beholderen sin.

Overlappe gitterelementer

Et rutenettelement kan overlappe (helt eller delvis dekke) et annet rutenett i følgende tilfeller:

1. Det er satt til å strekke over (og over) cellen (e) av et annet rutenettelement.
2. Dens størrelse har blitt økt, slik at den overlapper med det nærliggende rutenettet.
3. Den flyttes over på toppen av et annet rutenettelement.

Vi diskuterer andre og tredje tilfeller senere, i avsnittene "Størrelse" og "Flytting".

Først, la oss se det første tilfellet når et gitterelement spenner over en annen .

Gitteret i senteret har spenret over den venstre, så bare to gjenstander er synlige på skjermen.

 .grid-center {grid-area: center; rutenett-kolonne: 1/3; } 

grid-column og grid-row tilordner rutenettlinjer mellom hvilke en kolonne eller rad må passe.

På diagrammet nedenfor kan du se hvordan grid-column: 1 / 3 1/3 CSS-regel fungerer: midtkolonnen spenner mellom rutenettene 1 og 3 . Som et resultat overlapper midtkolonnen den venstre.

Flytt gitterelementer

Ved å flytte mener jeg å flytte elementene litt rundt . Hvis du helt ønsker å flytte et objekt til en annen gridcelle / -område, anbefaler jeg at du oppdaterer gridopprettelseskoden.

Det er enkelt å flytte rundt rutenett. Bare bruk margin, transform eller position:relative; eiendommer . Se nedenfor hvordan elementene blir flyttet ved hjelp av disse egenskapene.

Midt- og høyre rutenettelementer kan flyttes (som vist ovenfor) på følgende måter:

1. Bruke margin

Negative marginer øker dimensjonene på rutenettet, mens positive marginer trimmer dem. Ved å bruke en kombinasjon av begge, kan du slighlty flytte rutenettene rundt.

 .grid-center {grid-area: center; margin-venstre: -10px; margin-høyre: 10px; margin-topp: -10px; margin-bunn: 10px; } .grid-right {grid-area: right; margin-venstre: 10px; margin-høyre: -10px; margin-topp: -10px; margin-bunn: 10px; } 

2. Bruke transform

translate() CSS-funksjonen beveger et element langs x- og y-aksene . Ved å bruke den sammen med transform kan du endre posisjonen til et rutenettelement.

 .grid-center {grid-area: center; transformere: translate (-10px, -10px); } .grid-right {grid-area: right; transformere: oversette (10px, -10px); } 

3. Bruk position

Bruk position: relative; Regel med de angitte top, bottom, left og høyreegenskapene kan også brukes til å flytte rundt rutenettelementer også.

 .grid-center {grid-area: center; stilling: relativ; bunn: 10px; høyre: 10px; } .grid-right {grid-area: right; stilling: relativ; bunn: 10px; igjen: 10px; } 

Bestill rutenettet

Rutenettet blir gjengitt på skjermen i den rekkefølgen de vises i HTML-kildekoden .

I den forrige delen, da senterelementet ble flyttet til venstre, ble det plassert på toppen av det venstre elementet av nettleseren. Dette skjedde fordi i HTML-