Auto-Sizing Kolonner i CSS Nettet: `auto-fill` vs `auto-fit” –

0
72

En av de mest effektive og praktisk CSS Rutenett funksjonene er at, i tillegg til eksplisitte kolonne dimensjonering, vi har muligheten til å gjenta-til-fyll kolonner i et Rutenett, og deretter auto-sted elementer i dem. Mer spesifikt, vår evne til å angi hvor mange kolonner vi vil i nettet og for deretter å la nettleseren håndterer responsen til de kolonnene for oss, viser færre kolonner på mindre vindu størrelser, og flere kolonner som skjermen estate gir mulighet for mer, uten å måtte skrive en eneste media query til å diktere dette responsive atferd.

Vi er i stand til å gjøre det ved hjelp av bare én linje av CSS — one-liner som minner meg om da Humlesnurr bare viftet med tryllestaven hans i Horace leilighet og “møbler fløy tilbake til sine opprinnelige steder; ornamenter reformert i løse luften, fjær zoomet inn sine puter; revet bøker reparert seg selv som de landet på sine hyller…”.

Denne magiske, media-query-mindre respons er oppnådd ved å bruke repeat () – funksjon og automatisk plassering søkeord.

Mye har vært skrevet om denne one-liner, så jeg vil ikke være utdyping av hvordan det fungerer. Tim Wright har en stor writeup på dette som jeg anbefaler å lese.

For å oppsummere, gjenta () – funksjonen lar deg gjenta kolonner så mange ganger som nødvendig. Hvis du For eksempel skal opprette en 12-kolonner rutenett, kan du skrive følgende one-liner:

.grid {
visning: rutenett;

/* angi antall rutenett kolonner */
grid-mal-kolonner: repeat(12, 1fr);
}

Den 1fr er hva forteller leseren til å distribuere plass mellom kolonnene slik at hver kolonne like får en brøkdel av plassen. Som er, de er alle væske, er lik bredde kolonner. Og rutenettet vil, i dette eksempelet, alltid har 12 kolonner uavhengig av hvor stort det er. Denne, som du sikkert har gjettet, er ikke god nok, så vil innholdet være for klemt på mindre viewports.

Så vi må begynne med å angi en minste bredde for kolonner, noe som gjør at de ikke blir for smale. Vi kan gjøre det ved hjelp av minmax () – funksjonen.

grid-mal-kolonner: repeat( 12, minmax(250px, 1fr) );

Men måten CSS Rutenett fungerer, vil dette føre til overflyt i raden. Kolonnene vil ikke bryte inn nye rader hvis viewport bredde er for smal til å passe dem alle med den nye minimum bredde kravet, fordi vi er eksplisitt å fortelle leseren til å gjenta kolonner 12 ganger per rad.

For å oppnå innpakning, kan vi bruke auto-fit eller auto-fyll søkeord.

grid-mal-kolonner: repeat( auto-fit, minmax(250px, 1fr) );

Disse søkeordene fortelle leseren til å håndtere kolonnen dimensjonering og element pakke for oss, slik at elementene vil bryte inn rader når bredden er ikke stor nok til å passe dem uten overløp. Det brøkdel enhet brukte vi også sikrer at, i tilfelle bredden gjør det for en brøkdel av en kolonne til å passe, men ikke en hel kolonne, at plassen vil i stedet være distribuert over kolonnen eller kolonner som allerede passform, noe som gjør at vi ikke igjen med en tom plass på enden av raden.

Ved første glace av navn, det kan virke som auto-fyll-og auto-fit er motsetninger. Men faktisk, forskjellen er ganske subtil.

Kanskje det virker som du får ekstra plass ved enden av kolonnen med auto-fit. Men når og hvordan?

La oss ta en titt på hva som egentlig skjer under panseret.

Fyll eller Passe? Hva er forskjellen?

I en fersk CSS workshop, jeg oppsummert forskjellen mellom auto-fyll-og auto-fit som følger:

auto-fyll FYLLER rad med så mange kolonner som det kan passe. Så det skaper implisitt kolonner når en ny kolonne som kan passe, fordi det forsøker å FYLLE rad med så mange kolonner som det kan. Nylig lagt til kolonner, og kan være tom, men de vil fortsatt sitte i et eget rom i raden.

auto-fit PASSER de TILGJENGELIGE kolonner inn i rommet, og ved å utvide dem, slik at de tar opp all tilgjengelig plass. Nettleseren gjør det etter å FYLLE den ekstra plassen med ekstra kolonner (som med auto-fill ) og så kollapser tomme.

Dette kan virke forvirrende, men det gjør en mye mer fornuftig når du visualisere dette problemet. Så vi skal gjøre akkurat det, med Firefox DevTools’ Rutenett Inspector å hjelpe oss å visualisere størrelse og posisjon på vårt Rutenett elementer og kolonner.

Vurder følgende demo som et eksempel.

Se Penn auto-fyll vs auto-fit av Sara Soueidan (@SaraSoueidan) på CodePen.

Kolonnene er definert ved hjelp gjenta () – funksjonen, og har en minimum bredde på 100px, og en maksimal satt til 1fr , slik at de ville utvide og dele likt noen ekstra plass når den er tilgjengelig. Som for antall kolonner per rad, vi kommer til å bruke auto-plassering søkeord, slik at vi lar leseren ta vare på responsen av nettet og vil bryte kolonnene inn nye rader etter behov.

Nettleseren vil plassere og størrelse på kolonner i første eksempel ved hjelp av auto-fyll søkeord, og det vil bruke auto-fit for andre.

.grid-container–fylle {
grid-mal-kolonner: repeat(auto-fyll, minmax(100px, 1fr));
}

.grid-container–passer {
grid-mal-kolonner: repeat(auto-fit, minmax(100px, 1fr));
}

Opp til et visst punkt, både auto-fyll-og auto-fit viser identiske resultater.

Men de har ikke identisk oppførsel under panseret. Det bare skjer, slik at de vil gi det samme resultatet opp til en viss viewport bredde.

Det punktet hvor disse to søkeordene start stiller ulike virkemåter avhenger av antall og størrelse på kolonner som er definert i grid-mal-kolonner, så vil det variere fra ett eksempel til en annen.

Forskjellen mellom disse to søkeordene er tydelig når vinduet blir bred nok til å passe en (eller flere) ekstra kolonne(r) (at) i raden. På dette punktet, nettleseren er presentert med to måter å håndtere situasjonen, og hvordan det håndterer det i stor grad avhenger av om eller ikke det er innhold til å bli plassert inn på at ekstra kolonne.

Så, når raden kan passe til en ny kolonne, nettleseren går slik:

  1. “Jeg har noen plass til å passe en ny kolonne i det. Har jeg noe innhold (dvs. rutenett elementer) å gå inn som ekstra kolonne? Ja? OK, er alt bra. Jeg vil legge til kolonnen i raden, og det vil bryte inn en ny rad på mindre viewports.”
  2. I tilfelle der det er ingen innhold for å plassere inn en ny kolonne: “Må jeg tillate denne nye kolonnen til opptar plass på rad (og derfor påvirke plassering av og størrelse på resten av rader)? eller må jeg kollaps i denne kolonnen, og bruke sin plass å utvide den andre kolonner?”

auto-fyll-og auto-fit gi svaret på det siste spørsmålet, og i særdeleshet diktere hvordan nettleseren skal håndtere denne situasjonen. Du kan skjule eller ikke å kollapse, det er spørsmålet. Og det er også svaret.
Om du ønsker å slå sammen eller ikke, avhenger av innholdet ditt, og hvordan du vil at innholdet skal oppføre seg i forbindelse med responsive design.

La oss se hvordan dette fungerer. For å synliggjøre forskjellen mellom auto-fyll-og auto-fit, ta en titt på den følgende skjermen innspillingen. Jeg er endre størrelse på vinduet nok til å skape horisontal plass som er nok til å passe ett (eller flere) kolonne(r) i raden. Husk at disse to radene er identiske, og har nøyaktig samme innhold og kolonne nummer. Den eneste forskjellen i denne demoen er at jeg bruker auto-fill for det første en og auto-fit for andre.

Legge merke til hva som skjer der? Hvis det fortsatt ikke klart, er følgende opptaket skal gjøre det klarere:

auto-fyll oppførsel: “fyll rad opp! Legg til så mange kolonner som du kan. Jeg bryr meg ikke om de er tomme — de bør alle fortsatt dukke opp. Hvis du har nok plass til å legge til en kolonne, kan du legge den til. Jeg bryr meg ikke om den er tom eller ikke, det er fortsatt opptar plass i den raden som om det var fylt (som i: fylt med innhold/grid-elementer).”

Mens auto-fyll fyller rad med så mange kolonner som det kan, selv om de er tomme kolonner, auto-fit oppfører seg litt annerledes.
auto-fit gjør også fylle rad med flere kolonner er viewport bredde øker, men den eneste forskjellen er at den nylig lagt til kolonner (og helst kolonne hull som er forbundet med dem) er skjult. Rutenettet inspector er en fantastisk måte å visualisere dette. Du vil merke at kolonnene blir lagt til når du holder øye på nettet linje tall, noe som vil øke som viewport bredden øker.

auto-fit oppførsel: “gjør hva kolonnene du har passer inn i den tilgjengelige plassen. Utvide dem så mye som du trenger for å passe på rad størrelse. Tomme kolonner må ikke plasseres i alle rom. Sette det plass til bedre bruk ved å utvide fylt (som i: fylt med innhold/grid elementer) kolonner for å passe tilgjengelig rad plass.”

Et nyttig tips å huske på her er at de kolonnene som er lagt til i begge tilfeller (enten sammen eller ikke) er ikke implisitt kolonner — som har en spesifikk betydning i spec. I vårt tilfelle legger vi til/oppretter kolonner i den eksplisitte rutenett på samme måte som om vi erklært du ønsket 12 kolonner, for eksempel. Så kolonne nummer -1 vil arbeide for å målrette mot slutten av dette rutenettet, som det ikke hvis du oppretter kolonner i implisitt rutenett. Rekvisitter til Rachel Andrew for dette tipset.

Oppsummering

Forskjellen mellom auto-fyll-og auto-fit for dimensjonering kolonner er bare synlige når raden er bred nok til å få plass til flere kolonner i det.

Hvis du bruker auto-fit, innholdet vil strekke seg til å fylle hele raden bredde. Mens med auto-fyll, nettleseren vil tillate tomme kolonner for å okkupere plassen i rekken som sine ikke-tomme naboer — de vil bli tildelt en brøkdel av plassen, selv om de har ingen grid elementer i dem, og dermed påvirke størrelse/bredde av sistnevnte.

Hvilken atferd du vil, eller foretrekker det er helt opp til deg. Jeg har ennå til å tenke på en use case der auto-fyll ville være mer fornuftig enn auto-fit. Har du noen tilfeller? Hvis du gjør det, kan du gjerne dele dem i kommentarfeltet nedenfor.