Share
I tidligere opplæringsprogrammer har vi lært hvordan du setter opp et rutenett, og definerer eksplisitte egenskaper (som gitter-mal-kolonner og grid-template-områder) og til og med noen av dens implisitte egenskaper (som grid-auto-kolonner). I denne opplæringen skal vi se på shorthandegenskapen Nett som raskt omhandler alt ovenfor i en enkelt setning.
Som vanlig, begynn med å erklære skjerm: grid; på beholderen din. Deretter bruker du Nett egenskap for å legge ut radene dine, så kolonnene dine:
.grid-1 display: grid; rutenett: 100px auto 300px / repeat (2, 1fr) 100px;
Ovenstående erklæring sier at vi vil ha tre eksakte rader på 100px, auto og 300px. Og (ved hjelp av gjenta() funksjon) to kolonner av 1fr, deretter en av 100px. Det er akkurat det samme som denne lengre versjonen:
.grid-1 display: grid; rutenett-mal-rader: 100px auto 300px; grid-template-kolonner: gjenta (2, 1fr) 100px;
Begge uttalelsene gir oss dette:
Implisitte verdier er det vi ber Grid å bruke utover de eksplisitte verdiene vi definerer. I Nett shorthand vi kan ikke kombinere de to, så vi må velge. Ta en titt på dette, for eksempel:
.grid-1 display: grid; rutenettet: auto-flow 100px / 1fr 100px;
I dette tilfellet har vi fast med eksplisitte kolonner (en av 1fr, en annen av 100px), men våre rader bruker en forkortet form av gitter-auto-flow og grid-auto-rader. Det står "Når du trenger å legge til flere spor i rutenettet, legg dem til som rader. Og gjør hver 100px høy. " Det er det samme som dette:
.grid-1 display: grid; rutenett-mal-kolonner: 1fr 100px; grid-auto-flow: rad; grid-auto-rader: 100px;
Dette er ganske vanlig oppførsel, men vi ser en større endring hvis vi i stedet spør oss vårt implisitte rutenett for å bruke ekstra kolonner:
.grid-1 display: grid; rutenett: 100px 300px / auto-flow 100px;
Dette gir oss to rader på 100px og 300px, så settes effektivt grid-auto-flow: kolonne;. Det er det samme som:
.grid-1 display: grid; rutenett-mal-rader: 100px 300px; grid-auto-flow: kolonne; grid-auto-kolonner: 100px;
Nå plasserer automatisk plasseringsalgoritmen elementer fra topp til bunn, og legger til kolonner til høyre når det går tom for plass:
Merk: Vi kan ikke erklære auto-strømning på begge rader og kolonner, som ikke vil fungere.
Hvis du tenker tilbake til vår veiledning Forstå CSS-nettverket "Auto-plasseringsalgoritme", vil du huske vi diskuterte sparsom og tett; søkeord som beskriver måten gjenstander pakkes inn i et rutenett. Disse kan også brukes sammen med auto-strømning, som dette:
.grid-1 display: grid; rutenettet: 100px 300px / auto-flow tett 100px;
Malte områder er en måte å navngi områder av vårt rutenett, på en nesten visuelt representativ måte. I sin enkleste form ville vi bare bruke Nett å beskrive våre malområder og ingenting annet:
.grid-1 display: grid; rutenettet: "header header header" "main main sidebar" "footer footer footer";
Da vil vi angi hvilket område hvert nettobjekt fyller slik:
.element-1 grid-område: header;
Hvis du husker vår opplæringsoppgave for opprinnelige malområder, hadde vi litt flere detaljer for å gi oss kolonne- og raddimensjoner:
.grid-1 display: grid; Rutenett-mal-kolonner: Gjenta (3, 1fr); rutenett-mal-rader: 80px 180px 80px; grid-template-områder: "header header header" "main main sidebar" "footer footer footer";
Vi kan også gjøre det som følger:
.grid-1 display: grid; rutenett: "header header header" 80px "main main sidebar" 180px "footer footer footer" 80px / 1fr 1fr 1fr;
Vi legger til kolonnebredder etter fremoverstrekk (den gjenta() funksjonen vil ikke fungere i dette tilfellet, men jeg vet ikke hvorfor). Og vi legger til radhøyder inline etter arealerklæringene. Dette er hva vi ender med:
Denne opplæringen burde ha gitt deg en forståelse av hvordan Nett shorthand eiendom fungerer. Spill med det, se hvilke andre aspekter av CSS Grid-modulen du kan bruke med det, og gi oss beskjed om hvor mye tid det sparer deg!
Accentsconagua