Accentsconagua
Share
I en av våre tidligere introduksjonsveiledninger til CSS Grid så vi på væskekolonner og bedre takrenner. Vi lærte at det ikke er nødvendig å spesifisere nøyaktig hvor vi vil plassere våre rutenettelementer; Hvis vi erklærer gridets egenskaper, vil Grid spore elementene våre i henhold til sin automatiske plasseringsalgoritme.
I denne opplæringen tar vi en titt på hvordan algoritmen går om sitt arbeid og hvordan vi kan påvirke det.
Hvis nettleseren din ikke er konfigurert for å støtte Grid, må du sortere det ut for å følge med. Les dette:
Her er et demo-rutenett for å sparke ting Det er en beholder som vi har erklært å være skjerm: grid; og har atten barnelementer. Vi har uttalt at den skal ha fem kolonner, hver med like bredde, minst like mange rader, og en smal gutter rundt 2px.
rutenettmall-kolonner: gjenta (5, 1fr); rutenett-mal-rader: gjenta (5, 1fr); grid-gap: 2px;
Så langt så bra, og du kan se at Grid har tatt våre atten elementer og presset dem inn, jobber fra øverst til venstre, beveger seg til høyre, og deretter flyttes ned rad for rad. Denne oppførselen er som måten floats fungerer på.
Merk: Venstre til høyre oppførsel ville bli reversert hvis vi hadde å gjøre med a retning: RTL; oppsett.
Det er alt fint og pent, men la oss se hva som skjer når varene våre ikke passer så perfekt. Til .punkt-7 Vi legger til noen regler for å gjøre det større ved å strekke to kolonner og to rader:
.element-7 bakgrunn: # e03f3f; rutenett-kolonne: span 2; rutenett: spenne 2;
Hvordan ser det ut nå?
Ikke værst! .punkt-7 fyller opp mer plass, så .punkt-8 og .element-9 er plassert lenger over. .punkt-10 så ser ut til å se om det er ledig plass ved siden av .element-9, og når det ser er det ikke det beveger seg ned en rad og starter igjen helt til venstre. De andre elementene fortsetter å stikke inn på samme måte.
Men vent, hva om vi også gjør .element-9 litt overvektig?
Nå blir det interessant; .element-9 passer ikke lenger inn i kolonnen på slutten, så den skyves ned til neste rad. Som det ikke kan passe inn i noe utover .punkt-7 det forblir satt. .punkt-10, du kan tenke deg, ville tucke seg i under .punkt-6 igjen, men hvis du husker det, søker den etter en ledig kolonne, og svikter at den beveger seg ned en rad og shunts over til venstre igjen. Dette er et viktig konsept å forstå.
Hvis du ser på forrige demonstrasjon, ser du det .element-18, ved ikke å finne plass ved siden av .element-17, har flyttet ned en rad. Vi har faktisk bare definert fem rader, men Grid har antatt at vi vil ha en annen rad på. Dette skyldes gitter-auto-flow, som tilhører rutenettet, og hvis standardverdien er rad. Vi kan endre denne verdien til kolonne hvis vi vil, noe som helt ville endre måten vårt nett ser ut:
Dette ser ut på en måte liknende, men du vil legge merke til at elementene våre har slått øverst til venstre, deretter flyttet ned for å fylle hver rad, deretter flyttet over til den andre kolonnen og så videre. Så nå når et element er for stort for støvlene, søker følgende element etter det neste ledige raderommet, og hvis det ikke går over til neste kolonne.
Vi kan legge til et annet søkeord i vår gitter-auto-flow eiendom, og det er muligens min favoritt CSS-søkeord til dags dato: tett. Standardmodellen er sparsom (min andre favoritt). La oss gjøre følgende:
grid-auto-flow: rad tett;
Merk: Vi trenger ikke å inkludere rad her er det underforstått, men dette fremhever hvordan syntaksen fungerer.
Nå vår venn .punkt-10, ved å finne at det ikke er plass ved siden av .element-9, Først sjekker hva som er ovenfor før du går til en annen rad.
Takket være denne endringen i plasseringsalgoritmen er elementene våre nå tett pakket, noe som gir oss et mer effektivt fylt rutenett. Dette betyr imidlertid at den visuelle utformingen ikke nødvendigvis reflekterer dokumentkildestillingen, noe som kanskje ikke alltid er nyttig for brukeren.
La oss ta opp:
gitter-auto-flow fra rad til kolonne.gitter-auto-flow aksepterer et søkeord for å beskrive pakken. Som standard er denne verdien sparsom, men vi kan endre dette til tett som forsøker å fylle ut alle tilgjengelige hull.