Flytte elementer i CSS Grid Layout [Guide]
Bruker CSS Grid Layout Module i webdesign blir mer og mer mulig som flere nettlesere begynner å støtte det. 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 seg rundt Noen av rutenettene sitter fast i rutenettene sine. Du vil også kanskje Flytt dem ut av rutenettet (overløp), eller over hverandre (overlapping), 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 grid elementer 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 rutenettbeholderen inneholder de tre rutenettene.
I CSS, rutenettet har skjerm: grid; eiendom og rutenettene ha gitter-området som identifiserer navnene på gridelementområdene.
Vi også Legg til grid-template-områder eiendom til rutenettbeholderen, der rutenettnavnene er vant til tilordne gridområdene til gridcellene de representerer.
Alle kolonner ta størrelsen på en brøkdel (fr) av beholderbredden, sikring av inneslutning av gitterelementene.
.grid-container display: grid; grid-template-områder: "venstre midt høyre"; rutenettmall-kolonner: gjenta (3, 1fr); grid-template-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 lage et rutenettelement overløp gitterbeholderen hvis det er nødvendig for et oppsett. For å oppnå overløpseffekten trenger du bare å Bruk en annen kolonne størrelse:
.grid-container display: grid; grid-template-områder: "venstre midt høyre"; grid-template-kolonner: gjenta (3, 150px); grid-gap: 5px;
De summen av kolonne- og gapstørrelsen er større enn beholderens bredde, noe som gjør at rutenettene overlater beholderen sin.
Overlappe gitterelementer
EN Gitterelementet kan overlappe (helt eller delvis dekke) et annet rutenettelement i følgende tilfeller:
- Det er satt til å strekke seg over (og over) cellen (e) av et annet rutenettelement.
- Dens størrelse har blitt økt, slik at den overlapper med det nærliggende rutenettet.
- Den flyttes over på et annet gridelement.
Vi diskuterer andre og tredje tilfeller senere, i “dimensjonering” og “flytting” seksjoner.
Først, la oss se det første tilfellet når et rutenettelement spenner over en annen.
Gitteret i senteret har spredt over den venstre, så bare to elementer er synlige på skjermen.
.grid-center grid-area: center; rutenett-kolonne: 1/3;
De gitter-kolonne og gitter-rad eiendommer tilordne grid linjer mellom hvilken en kolonne eller rad må passe.
På nedenstående diagram kan du se hvordan rutenett: 1/3 CSS-regelen 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 bruke margin, de forvandle, eller stilling: i forhold; 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 til 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 forvandle
De oversette() CSS-funksjon beveger et element langs x- og y-aksene. Bruk den sammen med forvandle Egenskapen lar deg endre posisjonen til et rutenettelement.
.grid-center grid-area: center; transformere: translate (-10px, -10px); .grid-right grid-area: right; transformere: oversette (10px, -10px);
3. Bruke stilling
Bruker posisjon: relativ; herske med det angitte topp, bunn, venstre, og Ikke sant Egenskaper kan også brukes til å flytte rundt grid elementer også.
.grid-center grid-area: center; posisjon: relativ; bunn: 10px; høyre: 10px; .grid-right grid-area: right; posisjon: relativ; bunn: 10px; igjen: 10px;
Bestill rutenettet
Rutenettet blir gjengitt på skjermen i rekkefølgen vises de i HTML-kilden.
I det forrige avsnittet, da senterelementet ble flyttet til venstre, ble det plassert på toppen av det venstre elementet av nettleseren. Dette skjedde fordi i HTML-koden, Vi kan imidlertid endre rekkefølgeelementene bruker Bruker Som i CSS Grid Layout-modulen, endrer du elementordren i HTML påvirker ikke gridoppsettet, du kan også sette Hvis du bruker rader eller kolonner i stor størrelse for et rutenettelement (ved bruk av Husk at alle tre kolonnene i vår utvalgsramme tar en brøkdel ( Her endrer vi størrelsen på det venstre elementet bruker Her endrer vi størrelsen på det venstre elementet bruker z-indeks eller rekkefølge CSS egenskaper.
z-indeks: 1; regelen, det venstre rutenettet fikk en høyere stablingskontekst.. grid-venstre grid-område: venstre; z-indeks: 1;
Størrelsesgitterelementer
auto, fr, gr enheter), vil det krympe for å gi plass til nabobjektet som har vokst i størrelse bare hvis nevnte element ble ikke dimensjonert av forvandle eller en negativ margin.fr) av gitterbeholderen. Ta en titt på hvordan alle tre elementene ser ut etter at den venstre er forandret på to forskjellige måter.1. Sized with
bredde og høydebredde og høyde eiendommer. Som et resultat forblir den inne i rutenettbeholderen.
.grid-venstre grid-område: venstre; bredde: 200px; høyde: 90px;
2. størrelse med
forvandleforvandle eiendom. Som et resultat, overgår det beholderen, og gittergapet forsvinner også.
.grid-venstre grid-område: venstre; transformere: skalax (1,8);
