Auto-Dimensionering van de Kolommen in CSS Grid: `automatisch vullen` vs `auto-fit`

0
99

Een van de meest krachtige en handige CSS Grid functies is dat, naast expliciete kolom lijmen, hebben we de optie om te herhalen in te vullen kolommen in een Raster, en dan auto-items in hen. Meer specifiek, onze mogelijkheid om te specificeren hoeveel kolommen in het raster en vervolgens te laten de browser het verwerken van de reactie van de kolommen voor ons, tonen minder kolommen op kleinere viewport grootte, en meer kolommen als het scherm goed kunt voor meer hoeven te schrijven een enkele media query om te bepalen wat deze responsief gedrag.

We zijn in staat om dat te doen met behulp van slechts één regel CSS — de one-liner dat doet me denken aan toen Perkamentus zwaaide met zijn toverstaf in Horatius ‘ s appartement en “het meubilair vloog terug naar zijn oorspronkelijke plaats; ornamenten hervormd in de lucht, veren ingezoomd op hun kussens; gescheurde boeken gerepareerd zichzelf als ze geland op de planken…”.

Deze magische, media-query-minder respons is bereikt met de herhaal () – functie en de automatische plaatsing van zoekwoorden.

Er is al veel geschreven over deze bijzondere one-liner, dus ik zal hier niet worden ingegaan op hoe het werkt. Tim Wright heeft een grote writeup op deze die ik aanraad te lezen.

Om samen te vatten, de herhaal () – functie kunt u herhalen kolommen zo vaak als nodig is. Bijvoorbeeld, als u een 12-kolommen grid, kun je de volgende one-liner:

.raster {
display: grid;

/* definieer het aantal grid van kolommen */
grid-template-kolommen: herhaal(12, 1fr);
}

De 1fr is wat vertelt de browser om de te verdelen ruimte tussen de kolommen, zodat elke kolom gelijk krijgt een fractie van de ruimte. Dat is, ze zijn vloeistof -, gelijk-breedte kolommen. En het raster, in dit voorbeeld, hebben altijd 12 kolommen, ongeacht hoe breed is. Dit is, zoals u waarschijnlijk al geraden, is niet goed genoeg, als de inhoud te samengeperst op kleinere viewports.

Dus we moeten om te beginnen door het opgeven van een minimale breedte van de kolommen en zorg ervoor dat ze niet te smal. We kunnen dat doen met behulp van de minmax() functie.

grid-template-kolommen: herhaal( 12, minmax(250px, 1fr) );

Maar de manier waarop CSS Grid werkt, zal dit leiden tot een overloop in de rij. De kolommen worden niet terugloop in nieuwe rijen als de viewport breedte te smal is om ze te passen met de nieuwe minimale breedte eis, omdat we expliciet vertelt de browser om het herhalen van de kolommen 12 keer per rij.

Te bereiken verpakking, kunnen we gebruik maken van de auto-fit of auto-vul de zoekwoorden.

grid-template-kolommen: herhaal( auto-fit, minmax(250px, 1fr) );

Deze zoekwoorden vertellen de browser voor het verwerken van de kolom aanpassen en element verpakking voor ons, zodat de elementen verpakt in rijen wanneer de breedte is niet groot genoeg om ze te passen zonder overloop. De fractie die we ook gebruikt zorgt ervoor dat, in geval de breedte zorgt voor een fractie van een kolom aan te passen, maar niet een volledige kolom, die ruimte zal in plaats daarvan worden verdeeld over de kolom of kolommen die al passen, ervoor te zorgen dat we niet met lege ruimte aan het einde van de rij.

Op het eerste glace van de namen, het lijkt alsof automatisch invullen en auto-fit zijn tegenpolen. Maar in feite is het verschil tussen heel subtiel.

Misschien lijkt het alsof je het krijgen van extra ruimte aan het einde van de kolom met auto-fit. Maar wanneer en hoe?

Laten we een kijkje nemen naar wat er werkelijk gebeurt onder de motorkap.

Vul of de Pasvorm? Wat is het verschil?

In een recente CSS workshop, ik samengevat het verschil tussen auto-vullen en auto-past als volgt:

auto-fill VULT de rij met zoveel kolommen als het past. Dus het maakt impliciete kolommen zodra er een nieuwe kolom kan passen, omdat het probeert op te VULLEN de rij met zoveel kolommen als het kan. De nieuw toegevoegde kolommen en kan leeg zijn, maar ze zullen nog steeds het innemen van een aangewezen ruimte in de rij.

auto-fit PAST de MOMENTEEL BESCHIKBARE kolommen in de ruimte door het uitbreiden zodat ze nemen alle beschikbare ruimte. De browser doet dat na het VULLEN van die extra ruimte met extra kolommen (zoals bij auto-fill ) en dan instorten van de lege containers.

Dit klinkt misschien verwarrend in het begin, maar het maakt het een stuk logischer als je dit te visualiseren gedrag. Zo doen we precies dat, met de Firefox DevTools’ Raster Inspecteur helpen ons met het visualiseren van de grootte en de positie van onze Raster items en kolommen.

Beschouw de volgende demo als voorbeeld.

Zie de Pen automatisch invullen vs auto-past door Sara Soueidan (@SaraSoueidan) op CodePen.

De kolommen worden gedefinieerd met behulp van de herhaal() functie en een minimale breedte van 100 pixels, en een maximum ingesteld op 1fr , zodat ze zou uitbreiden en een gelijk aandeel in extra ruimte wanneer het beschikbaar is. Voor het aantal kolommen per rij, gaan we gebruik maken van de auto-de plaatsing van zoekwoorden, dus dat laten we de browser het verzorgen van de responsiviteit van het raster en wikkel de kolommen in rijen wanneer dat nodig is.

De browser zal de plaats en grootte van de kolommen in het eerste voorbeeld met behulp van de auto-vul het trefwoord en het gebruik van auto-fit voor de tweede.

.grid-container–vul {
grid-template-kolommen: herhaal(auto-fill, minmax(100px, 1fr));
}

.grid-container–fit {
grid-template-kolommen: herhaal(auto-fit, minmax(100px, 1fr));
}

Tot een bepaald punt, zowel auto-vullen en auto-fit tonen identieke resultaten.

Maar ze hoeven niet identiek gedrag onder de motorkap. Het is gewoon zo gebeurt het dat ze hetzelfde resultaat geeft tot een bepaalde viewport breedte.

Het punt waarop deze twee zoekwoorden start vertonen ander gedrag is afhankelijk van het aantal en de grootte van de kolommen gedefinieerd in raster-template-kolommen, dus het zal verschillen van het ene voorbeeld naar het andere.

Het verschil tussen deze twee zoekwoorden wordt gemaakt duidelijk wanneer de viewport wordt breed genoeg voor één (of meer) extra kolom(s) die (dat) in de rij. Op dat punt, de browser wordt gepresenteerd met twee manieren om te handelen in de situatie, en hoe het omgaat met het hangt grotendeels af van of er wel of niet de inhoud geplaatst worden in een extra kolom.

Dus, als de rij kan passen aan een nieuwe kolom, de browser gaat, zoals:

  1. “Ik heb een ruimte in te passen in een nieuwe kolom in. Heb ik een content (d.w.z. grid items) in die extra kolom? Ja? OK, allemaal goed. Ik voeg de kolom in de rij, en het wikkelen in een nieuwe rij op kleinere viewports.”
  2. In het geval er geen content te plaatsen in een nieuwe kolom: “kan ik toestaan dat deze nieuwe kolom aan ruimte innemen in de rij (en dus van invloed zijn op de positie en de grootte van de rest van de rijen)? of moet ik ineenstorting die kolom en gebruik van de ruimte om uit te breiden de andere kolommen?”

automatisch invullen en auto-past het antwoord op die laatste vraag in het bijzonder, en bepalen hoe de browser moet het verwerken van dit scenario. Te storten of niet in te storten, dat is de vraag. En dat is ook het antwoord.
Of u wilt samenvouwen of niet hangt af van je inhoud en hoe u wilt dat de inhoud zich te gedragen in de context van een responsive design.

Laten we eens kijken hoe dit werkt. Visualiseren het verschil tussen auto-vullen en auto-fit, een kijkje nemen op het volgende scherm de opname. Ik ben de grootte van de viewport genoeg is om de horizontale ruimte dat is genoeg voor één (of meer) kolom(s) in de rij. Vergeet niet dat deze twee rijen zijn identiek en hebben exact dezelfde inhoud en kolomnummer. Het enige verschil in deze demo is dat ik met behulp van auto-vullen voor de eerste en auto-fit voor de tweede.

Let op wat er gebeurt? Als het nog steeds niet duidelijk, de volgende opname moet het duidelijker:

auto-fill gedrag: “vul die rij! Voeg zoveel kolommen als je kunt. Ik niet schelen als ze leeg zijn — ze moet het allemaal nog zien. Als je genoeg ruimte hebt voor het toevoegen van een kolom toe te voegen. Ik niet schelen als het leeg is of niet, het is nog steeds het innemen van ruimte in de rij als het ware gevuld (als in: gevuld met content/grid items).”

Terwijl de auto-fill vult de rij met zoveel kolommen als het kan, zelfs indien deze kolommen zijn leeg, auto-fit gedraagt zich een beetje anders.
auto-fit doet, te, vullen de rij met meerdere kolommen zijn de viewport breedte toeneemt, maar het enige verschil is dat de nieuw toegevoegde kolommen (en elke kolom gaten met hen verbonden) zijn ingestort. Het Raster inspecteur is een fantastische manier om dit te visualiseren. U zult merken dat de kolommen worden toegevoegd wanneer u uw oog te houden op het Raster van getallen, die zal toenemen als de viewport breedte toeneemt.

auto-fit gedrag: “welke kolommen u passen in de beschikbare ruimte. Vouw ze zo veel als je nodig hebt om te passen in de rij grootte. Lege kolommen moet niet bezetten geen ruimte. Zet die ruimte beter te benutten door het uitbreiden van het gevuld (als in: gevuld met content/grid items) kolommen aan te passen op de beschikbare rij ruimte.”

Een handige tip om te onthouden hier is dat de kolommen toegevoegd in beide gevallen (al ingestort of niet) zijn niet impliciet kolommen — dat heeft een specifieke betekenis in de spec. In ons geval, we zijn het toevoegen van/het maken van kolommen in de expliciete raster op dezelfde manier als we gedeclareerd je wilde 12 kolommen, bijvoorbeeld. Zo kolom aantal -1 zal werken aan de doelstelling het einde van dit net, wat het niet doet als je het maken van kolommen in de impliciete raster. Props voor Rachel en Andrew voor deze tip.

Samenvatting

Het verschil tussen auto-vullen en auto-fit voor de dimensionering van de kolommen is alleen merkbaar als de rij is breed genoeg voor meer kolommen in.

Als u gebruik maakt van automatische-fit, de inhoud zal uitstrekken tot het invullen van de gehele rij breedte. Overwegende dat met auto-fill, de browser zal u lege kolommen ruimte innemen in de rij net als hun niet-lege buren — ze zal worden toegewezen een fractie van de ruimte, zelfs als ze geen raster items in hen, waardoor de grootte/breedte van het laatste.

Welk gedrag u wilt of liever, is geheel aan u. Ik heb nog te denken van een use case waar auto-fill zou meer voor de hand dan auto-fit. Heb je use cases? Als je dat doet, gelieve te voelen vrij om ze te delen in de opmerkingen hieronder.