no.hideout-lastation.com
Paradis For Designere Og Utviklere


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-

kommer etter
, derfor blir senterelementet gjengitt etter (og over) den venstre.

Vi kan imidlertid endre rekkefølgeelementene ved hjelp av z-index eller order CSS-egenskapene.

Bruke z-index: 1; regelen, det venstre gridelementet fikk en høyere stablingskontekst .

 . rutenett-venstre {rutenett-område: venstre; z-indeks: 1; } 

Som i CSS Grid Layout-modulen, vil endring av elementordren i HTML ikke påvirke gridoppsettet, du kan også sette

før
i HTML-koden. Gjør dette bare hvis den oppdaterte HTML-koden ikke skader tilgjengelighet.

Størrelsesgitter elementer

Hvis du bruker rader eller kolonner i automatisk størrelse for et rutenettelement (ved hjelp av auto, fr, gr enheter), vil den krympe for å gjøre plass til det nærliggende elementet som har vokst i størrelse bare hvis elementet ikke ble dimensjonert med transform eller negativ margin .

Husk at alle tre kolonnene i vår prøvegitter tar en brøkdel ( fr ) av rutenettet. Ta en titt på hvordan alle tre elementene ser ut etter at den venstre er forandret på to forskjellige måter.

1. Størrelse med width og height

Her endrer vi størrelsen på det venstre elementet ved hjelp av width og height . Som et resultat forblir den inne i rutenettbeholderen.

.grid-left {grid-area: left; bredde: 200px; høyde: 90px; }
2. Formet med transform

Her endrer vi størrelsen på det venstre elementet ved hjelp av transform . Som et resultat overgår det beholderen, og gittergapet forsvinner også.

.grid-left {grid-area: left; transformere: skalax (1, 8); }

30 Kule og tilpassede Android Hjem-skjermer

30 Kule og tilpassede Android Hjem-skjermer

SEr du lei av å se på den samme gamle Android-hjemmeskjermen? Hvis du eier en Android-enhet, kan du få enhetens hjemmeskjerm til å se imponerende ut med noen få touch av gode apper og widgets. Det er bare så mange typer homescreens der ute, og spørsmålet er om du har tid til å sette opp din egen tilpassede Android-hjemmeskjerm .Vel, kan

(Tekniske og design tips)

10 Cool Gboard funksjoner og hvordan du bruker dem

10 Cool Gboard funksjoner og hvordan du bruker dem

Gboard, Google Tastatur med nytt navn og interessante funksjoner, har nylig gjort veien til Andriod. Din Android-telefon vil allerede bli oppdatert med dette nye standardtastaturet. Hvis det gamle Googles tastaturets begrensede funksjoner tvunget deg til å bytte til et Android-tastatur fra en tredjepart, kan Gboard endre seg .

(Tekniske og design tips)