Auto-Dimensionering Kolumner i CSS-Grid: `auto-fill` vs `auto-fit`

0
113

En av de mest kraftfulla och bekväma CSS Rutnät funktioner är att, förutom att explicit kolumn dimensionering, vi har möjlighet att upprepa det-att-fylla kolumner i ett Rutnät, och sedan auto-placera objekt i dem. Mer specifikt, vår förmåga att ange hur många kolumner som vi vill ha i nätet och sedan låta webbläsare hanterar lyhördhet för de kolumner för oss, visar färre kolumner på mindre vyport storlekar, och fler kolumner när skärmen estate möjliggör för fler, utan att behöva skriva en enda media query för att diktera detta lyhörd beteende.

Vi kunna göra det med bara en rad i CSS — one-liner som påminner mig om när Dumbledore bara viftade med sin trollstav i Horace ‘ s lägenhet och “möbler flög tillbaka till sina ursprungliga platser, ornament reformeras i luften, fjädrar zoomat in på deras kuddar, sönderrivna böcker repareras sig själva som att de landat på sina hyllor…”.

Denna magiska, media-query-mindre lyhördhet uppnås med hjälp upprepa () – funktion och automatisk placering av sökord.

Mycket har skrivits om detta särskilt one-liner, så jag kommer inte att fördjupa mig i hur det fungerar. Tim Wright har en stor writeup på detta som jag rekommenderar att läsa.

För att sammanfatta, upprepa() funktion kan du upprepa kolumner så många gånger som behövs. Till exempel, om du skapar en 12-kolumner nätet, kan du skriva följande one-liner:

.grid {
display: nätet.

/* definiera antalet grid kolumner */
grid-template-kolumner: upprepa(12, 1fr);
}

Den 1fr är vad som talar om för webbläsaren att fördela utrymmet mellan kolumnerna, så att varje kolumn lika blir en del av det utrymmet. Det är, de är alla vätska, lika bredd på kolumnerna. Och nätet kommer, i detta exempel, har alltid 12 kolumner, oavsett hur stort det är. Detta är, som du säkert gissat, är inte tillräckligt bra, så kommer innehållet vara alltför komprimerat på mindre viewport.

Så vi måste börja genom att ange en minsta bredd för kolumner, vilket gör att de inte blir för smala. Vi kan göra det med hjälp av den minmax () – funktionen.

grid-template-kolumner: upprepa( 12, minmax(250px, 1fr) );

Men sättet CSS Nätet fungerar, detta kommer att orsaka spill i rad. Kolumnerna kommer inte linda in nya rader om det virtuella bredd är för smala för att passa dem alla med den nya minsta bredd krav, eftersom vi är uttryckligen talar om för webbläsaren att upprepa kolumner 12 gånger per rad.

För att uppnå förpackning, kan vi använda auto-fit eller auto-fill sökord.

grid-template-kolumner: upprepa( auto-fit, minmax(250px, 1fr) );

Dessa sökord tala om för webbläsaren att hantera kolumnen dimensionering och element omslag för oss, så att de delar som kommer att svepa in rader när bredden inte är tillräckligt stort för att passa dem utan bräddavlopp. Den fraktion enhet använde vi säkerställer också att i de fall den bredd som gör det möjligt för en bråkdel av en kolumn för att passa men inte en hel kolumn, att utrymme kommer istället att fördelas över den eller de kolumner som redan passform, vilket gör att vi inte är kvar med alla tomma utrymmet i slutet av raden.

Vid första glace på namnen, det kan verka som auto-fill och auto-fit är motsatser. Men i själva verket är skillnaden mellan är ganska subtil.

Kanske det verkar som om du får extra mellanslag i slutet av en kolumn med auto-fit. Men när och hur?

Låt oss ta en titt på vad som verkligen händer under huven.

Fylla eller Passa? Vad är skillnaden?

I en nyligen CSS verkstad, jag sammanfattade skillnaden mellan auto-fill och auto-fit som följer:

auto-fill FYLLER rad med lika många kolumner som den kan passa. Så skapar det implicita kolumner när en ny kolumn kan passa, eftersom det försöker att FYLLA en rad med så många kolumner som kan det. Den nyligen lagt till kolumner kan och får vara tomma, men de kommer fortfarande utgör ett särskilt utrymme i rad.

auto-fit PASSAR den för NÄRVARANDE TILLGÄNGLIGA kolumner i utrymmet genom att utöka dem så att de tar upp något utrymme som är tillgängligt. Webbläsaren gör det efter att FYLLA det extra utrymme med extra kolumner (med auto-fill ) och sedan kollapsar den tomma sådana.

Detta kanske låter förvirrande i början, men det gör mycket mer meningsfullt när du visualisera detta beteende. Så vi kommer att göra just detta, med Firefox DevTools ” Grid Inspektör att hjälpa oss att visualisera storlek och position för vårt Rutnät artiklar och kolumner.

Beakta följande demo som ett exempel.

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

Kolumnerna definieras med hjälp upprepa() funktion och har en minsta bredd av 100px, och en maximal inställd på att 1fr , så att de skulle expandera och lika andel eventuella extra utrymme när det är tillgängligt. För antalet kolumner per rad, som vi kommer att använda auto-placering sökord, så att vi låter webbläsare tar hand om tillgängligheten i nätet och kommer att avsluta den kolumner till nya rader när det behövs.

Webbläsaren kommer att placera och storlek på kolumner i det första exemplet använder auto-fill sökord, och det kommer att använda auto-fit för andra.

.grid-container–fyll {
grid-template-kolumner: upprepa(auto-fill, minmax(100px, 1fr));
}

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

Upp till en viss punkt, både auto-fill och auto-fit visa identiska resultat.

Men att de inte har samma beteende under huven. Det råkar vara så att de kommer att ge samma resultat upp till en viss vy bredd.

Den punkt där dessa två sökord börja uppvisar olika beteenden beroende på antal och storlek på kolumner som definieras i grid-template-kolumner, så det kommer att variera från ett exempel till en annan.

Skillnaden mellan dessa två sökord som är uppenbart när det virtuella blir tillräckligt bred för att passa en (eller fler) extra kolumn(s) (som) i rad. Vid denna punkt, webbläsare presenteras med två sätt att hantera den situationen, och hur man hanterar det beror till stor del på om det är innehållet som ska placeras i den extra kolumnen.

Så, när raden kan passa en ny kolumn, webbläsaren går som:

  1. “Jag har lite utrymme att montera en ny kolumn i det. Jag har inte något innehåll (dvs rutnät artiklar) för att gå in i den extra kolumnen? Ja? OK, bra. Jag ska lägga till kolumnen i rad, och det kommer att linda in en ny rad på mindre viewport.”
  2. I de fall där det inte finns något innehåll att placera in i en ny kolumn: “tillåter jag detta nya kolumnen upptar utrymme i rad (och därmed påverka placeringen och storleken på resten av raderna)? eller gör jag en kollaps den kolumnen, och använda sitt utrymme att expandera andra kolumner?”

fyll automatisk och auto-fit ge svaret på den sista frågan i synnerhet, och för att diktera hur webbläsare ska hantera detta scenario. Om du vill komprimera eller inte att kollapsa, det är frågan. Och det är också svaret.
Oavsett om du vill ha det till kollaps eller inte beror på ditt innehåll och hur du vill att innehållet ska bete sig i samband med en responsiv design.

Låt oss se hur detta fungerar. För att åskådliggöra skillnaden mellan auto-fill och auto-fit, ta en titt på följande skärm inspelning. Jag ändra storlek på det virtuella tillräckligt för att skapa horisontella utrymme som är tillräckligt för att passa en (eller fler) kolumn(s) i rad. Kom ihåg att dessa två rader är identiska, och har exakt samma innehåll och kolumn nummer. Den enda skillnaden i detta demo är att jag använder autofyll för den första och auto-fit för andra.

Lägg märke till vad som sker där? Om det fortfarande inte klart, följande inspelning bör göra det tydligare:

auto-fill beteende: “fyll denna rad upp! Lägg till så många kolumner som du kan. Jag bryr mig inte om de är tomma — de ska alla fortfarande att visa upp. Om du har tillräckligt med utrymme för att lägga till en kolumn kan du lägga till den. Jag bryr mig inte om det är tomt eller inte, det är fortfarande ockuperar utrymme i raden som om den var fylld (som i: fyllas med innehåll/grid-objekt).”

När auto-fill fyller rad med lika många kolumner som den kan, även om de kolumner tomma, auto-fit beter sig lite annorlunda.
automatisk passform gör också, att fylla den raden med fler kolumner är det virtuella bredd ökar, men den enda skillnaden är att de nytillkomna kolumner (och en kolumn för brister i samband med dem) är komprimerade. Nätet inspector är ett fantastiskt sätt att visualisera detta. Du kommer att märka att kolumner läggs till när du håller ditt öga på Nätet-linje, som kommer att öka som det virtuella bredd ökar.

auto-fit beteende: “gör vad kolumner du har passar in i det tillgängliga utrymmet. Expandera dem så mycket som du behöver för att passa raden storlek. Tomma kolumner måste inte upptar något utrymme. Lägga det utrymmet till bättre användning genom att utöka den fyllda (som i: fyllas med innehåll/grid-objekt) kolumner för att passa de tillgängliga rad rymden.”

Ett användbart tips för att komma ihåg här är att kolumner läggs i båda fallen (om kollapsat eller inte) är inte implicita kolumner — som har en särskild betydelse i spec. I vårt fall är vi lägga till/skapa kolumner i den erotiska nätet på samma sätt som om vi förklarade att du ville ha 12 kolumner, till exempel. Så kolumn nummer -1 kommer att arbeta för att målet i slutet av detta nät, som den inte om du skapar kolumner i den implicita nätet. Rekvisita till Rachel Andrew för detta tips.

Summering

Skillnaden mellan auto-fill och auto-fit för dimensionering kolumner är bara märks när raden är tillräckligt bred för att få plats med fler kolumner i den.

Om du använder auto-fit, innehållet kommer att sträcka för att fylla hela raden bredd. Medan med auto-fill, webbläsaren kommer att tillåta tomma kolumner för att uppta utrymme i rad som sina icke-tom grannar — de kommer att tilldelas en bråkdel av utrymme, även om de har ingen grid objekt i dem, vilket påverkar storleken/bredden på den senare.

Vilket beteende du vill ha eller föredrar är helt upp till dig. Jag har ännu att tänka på ett användningsfall där auto-fill skulle göra mer nytta än auto-fit. Har du några användningsfall? Om du gör, vänligen dela gärna med dig av dem i kommentarerna nedan.