Share
Hittil har våre CSS grid opplæringsprogrammer i stor grad fokusert på eksplisitt verdier-spor størrelser som vi har uttrykkelig definert. Vi har brukt rader som er 200px høye, eller kanskje kolonner som er 1fr bred, og vi har uttrykkelig oppgitt hvor mange av dem vi vil ha. Men hva hvis vi ikke vet (eller ikke vil forplikte seg til) hvor mange spor vi vil ha? Det er hvor implisitt verdier kommer inn i spill-la oss ta en titt.
Her er et grunnleggende rutenett som du kan gaffel å følge med. Det gir oss en gitterbeholder med 9 gitterelementer. Ingen kolonnebredder eller -mengder er definert ennå, slik at hvert element fyller maksimal bredde som er tilgjengelig:
La oss forestille oss at vi ønsker en kolonne til venstre, og at vi vet nøyaktig hvor bredt vi vil ha det: 300px. Vi kan definere det ved å legge til grid-template-kolonner: 300px; til rutenettet. Men vi vil ikke bli gitt noen andre kolonner med mindre vi eksplisitt definere dem:
Det vil si, med mindre vi sier at vi ønsker at et av rutenettene skal plasseres i (for eksempel) kolonne 3 på rad 1:
.element-3 grid-column: 3; rutenett: 1;
Det gir oss ekstra kolonner utenfor vårt definerte grid fordi CSS Grid vil bruke ledig plass og dens automatisk plasseringsalgoritme for å finne ut hvor alt annet går.
Dette er flott, og Grid vil gjøre forutsetninger selv om vi vil ha flere kolonner, uten at vi må definere hver enkelt. Men hva om vi vil ha de stilte sporene, men mange der, for å ha en bestemt bredde? Det er hvor grid-auto-kolonner kommer inn i spill.
Hvis vi vil at alle kolonnene i tillegg til de første skal være 100 px brede, kan vi implisitt si at:
grid-auto-kolonner: 100px;
Paret med vår eksplisitte verdi, får vi det beste fra begge verdener. Her sier vi at vi vil at den første kolonnen skal være 1fr (at det tar opp en brøkdel av det som er igjen-auto ville ha samme effekt her) og at noen andre kolonner etter det burde være 100px presist:
grid-template-kolonner: 1fr; grid-auto-kolonner: 100px;
Dette gir oss følgende:
Og hvis vi sier at element 3 egentlig burde plasseres i kolonne 5, på rad 1, vet Grid hvor bredt det er å lage noen ekstra kolonner fordi det er underforstått.
Vi er ikke begrenset til pixelverdier her heller; vi kunne bruke fraksjon enheter, em enheter, selv MinMax () notat som vi har diskutert i tidligere opplæringsprogrammer.
Det går nesten uten å si det grid-auto-rader vil gjøre det samme for rader som grid-auto-kolonner gjør for kolonner. Her er et eksempel, hvor alle rader, men de to første er fast i en høyde av 200px.
Mange av Grids egenskaper har standardverdier som vil passe deg i tilfelle du ikke definerer noe annet, men noen ganger må vi i det minste innebære det vi ønsker. Med implisitt sporstørrelse kan vi antyde hvilken størrelse eventuelle ekstra rader eller kolonner skal være, hvis de noensinne trengs.
Accentsconagua