Flytning af elementer i CSS Grid Layout [Guide]
Bruger CSS Grid Layout Module i webdesign bliver mere og mere gennemførligt, da flere browsere begynder at støtte det. Mens du opretter layouter, der udfylder gitterceller, kan der dog komme et øjeblik, når du vil opnå mere komplicerede ting.
For eksempel vil du måske Flytte lidt nogle af gitterelementerne sidder fast i deres gitterområder. Du vil også måske flyt dem ud af gitterbeholderen (overløb), eller over hinanden (overlapning), eller bare ... til noget tomt rum rundt.
Så i dette indlæg vil jeg vise dig, hvordan du kan flytte, bestille, overlap, overlap og størrelse gitter elementer når du bruger CSS Grid Layout Module.
Opret et CSS-net
Lad os først lave et simpelt CSS-net med en række og tre kolonner.
I HTML'en opretter vi en flok divs, hvor netbeholderen indeholder de tre gitterelementer.
I CSS, gitterbeholderen har display: gitter; ejendom og gitterelementerne har grid-område der identificerer navnene på gitterelementets områder.
Vi også tilføj grid-skabelon-områder ejendom til gitterbeholderen, hvor gitternavnenavne er vant til tildel gridområderne til de netceller, de repræsenterer.
Alle kolonner tage størrelsen på en brøkdel (fr) af beholderbredden, hvilket sikrer indeslutning af gitterelementerne.
.gitterbeholder display: gitter; Gitter-skabelon-områder: 'venstre center højre'; Gitter-skabelon-kolonner: Gentag (3, 1fr); Gitter-skabelon-rækker: 80px; gittergap: 5px; bredde: 360px; baggrundsfarve: magenta; .grid-left grid-area: left; .grid-center grid-area: center; .grid-højre grid-område: højre; .grid-container div baggrundsfarve: lysegrøn;
Overflow gitter elementer
Du kan lave et gitterelement overløb sin gitterbeholder hvis det er nødvendigt for et layout. For at opnå overløbseffekten behøver du bare brug en anden kolonne størrelse:
.gitterbeholder display: gitter; Gitter-skabelon-områder: 'venstre center højre'; Gitter-skabelon-søjler: Gentag (3, 150px); gittergap: 5px;
Det summen af kolonne- og mellemrummets størrelse er større end beholderens bredde, hvilket medfører, at gitterelementerne overlader deres beholder.
Overlap gitterelementer
EN nettet kan overlappe hinanden (helt eller delvis dække) et andet gitter element i følgende tilfælde:
- Det er indstillet til at spænde over (og over) cellen (e) af et andet gitterelement.
- Dens størrelse er blevet forøget, så den overlapper med det nærliggende gitterelement.
- Det flyttes over på toppen af et andet gitterelement.
Vi diskuterer det andet og tredje tilfælde senere, i “dimensionering” og “Bevæger sig” sektioner.
Lad os først se det første tilfælde når et gitterelement spænder over en anden.
Gitteret i midten har spændt over den venstre side, så kun to ting er synlige på skærmen.
.gitter-center gitter-område: center; gitter-kolonne: 1/3;
Det grid-søjle og grid-rækken ejendomme tildel grid linjer mellem hvilken en kolonne eller række skal passe.
På nedenstående diagram kan du se, hvordan gitter-kolonne: 1/3 CSS-regel fungerer: midtkolonnen spænder mellem gitterlinierne 1 og 3. Som følge heraf overlapper midtkolonnen den venstre side.
Flyt gitterelementer
Ved at flytte mener jeg flytte varerne lidt rundt. Hvis du helt ønsker at flytte et objekt til en anden gittercelle / -område, anbefaler jeg dig at opdatere gitterkoden.
Det er nemt at flytte rutenettet. Lige brug margen, det omdanne, eller den position: relative; ejendomme. Se nedenfor, hvordan emnerne flyttes ved hjælp af disse egenskaber.
Centret og højre gitterelementer kan flyttes (som vist ovenfor) på følgende måder:
1. Brug margen
Negative margener øger dimensionerne af gitterelementer, mens positive margener trimmer dem. Ved at bruge en kombination af begge kan du let flytte gitterobjektene rundt.
.gitter-center gitter-område: center; margen-venstre: -10px; margen-højre: 10px; margin-top: -10px; margin-bund: 10px; .grid-højre grid-område: højre; margin-venstre: 10px; margin-højre: -10px; margin-top: -10px; margin-bund: 10px;
2. Brug omdanne
Det Oversætte() CSS funktion flytter et element langs x- og y-akserne. Brug det sammen med omdanne Egenskaben giver dig mulighed for at ændre placeringen af et gitterelement.
.gitter-center gitter-område: center; transformere: translate (-10px, -10px); .grid-højre grid-område: højre; transformere: translate (10px, -10px);
3. Brug position
Bruger stilling: relativ; regere med det angivne top, bund, venstre, og ret Egenskaber kan også bruges til at flytte rundt gitter elementer også.
.gitter-center gitter-område: center; stilling: relativ; bund: 10px; højre: 10px; .grid-højre grid-område: højre; stilling: relativ; bund: 10px; venstre: 10px;
Bestil gitterartikler
Rutenettet bliver gjort på skærmen i den rækkefølge, de vises i HTML-kildekoden.
I det forrige afsnit, da center-elementet blev flyttet til venstre, blev det placeret på toppen af det venstre element af browseren. Dette skete, fordi i HTML'en, Men det kan vi ændrer ordrenettet bruger Bruger Som i CSS Grid Layout-modulet, ændres elementordren i HTML påvirker ikke gitterlayoutet, du kan også sætte Hvis du bruger rader eller kolonner i automatisk størrelse til et gitterelement (ved hjælp af Husk, at i alle vores kolonner tager vi en brøkdel i Her ændrer vi størrelsen af det venstre element bruger Her ændrer vi størrelsen af det venstre element bruger z-index eller den bestille CSS egenskaber.
z-indeks: 1; regel, det venstre gitterelement fik en højere stablingskontekst.. gitter-venstre gitterområde: venstre; z-indeks: 1;
Størrelsesgitterartikler
auto, fr, gr enheder), det vil krympe for at gøre plads til dets nabostatus, der er vokset i størrelse kun hvis nævnte vare blev ikke dimensioneret af omdanne eller en negativ margen.fr) af gitterbeholderen. Tag et kig på, hvordan alle tre elementer ser ud efter at den venstre er ændret på to forskellige måder.1. størrelse med
bredde og højdebredde og højde ejendomme. Som følge heraf forbliver den inde i gitterbeholderen.
.gitter-venstre gitterområde: venstre; bredde: 200px; højde: 90px;
2. størrelse med
omdanneomdanne ejendom. Som følge heraf overlader den beholderen, og gittergabet forsvinder også.
.gitter-venstre gitterområde: venstre; transformere: skalax (1,8);
