Accentsconagua
Share
I en av våra tidigare introduktionshandledning till CSS Grid såg vi på vätskekolonner och bättre rännor. Vi lärde oss att det inte är nödvändigt att ange exakt var vi vill placera våra nätartiklar. Om vi förklarar våra nätets egenskaper kommer Grid att spåra våra objekt i enlighet med sin auto-placeringsalgoritm.
I denna handledning tar vi en titt på hur den algoritmen går om sitt arbete och hur vi kan påverka det.
Om din webbläsare inte är inställd för att stödja Grid måste du sortera ut det för att följa med. Läs detta:
Här är ett demo-galler för att sparka bort saker; Det är en behållare som vi har förklarat vara display: rutnät; och innehar arton barnelement. Vi har angett att den ska ha fem kolumner, var och en med samma bredd, åtminstone samma antal rader och en smal rännan runt om 2px.
rutnätmall-kolumner: upprepa (5, 1fr); raster-mall-rader: repetera (5, 1fr); gallergap: 2px;
Hittills så bra, och du kan se att Grid har tagit våra arton saker och tryckt in dem, arbetar från vänster till vänster, flyttar över till höger och flyttar sedan ner rad för rad. Detta beteende är ungefär som hur flottorna fungerar.
Notera: Vänster-till-höger beteende skulle vända om vi hade att göra med a riktning: RTL; layout.
Det är allt snyggt och snyggt, men låt oss se vad som händer när våra föremål inte passar så perfekt. Till .item-7 vi lägger till några regler för att göra det större genom att spänna över två kolumner och två rader:
.item-7 background: # e03f3f; rutnät-kolumn: span 2; rutnät: spänning 2;
Hur ser det ut nu?
Inte så dåligt! .item-7 fyller upp mer utrymme, så .item-8 och .item-9 är placerade längre bort. .post-10 ser sedan ut om det finns ett ledigt utrymme bredvid .item-9, och när den ser det går det inte ner en rad och börjar igen längst till vänster. De andra objekten fortsätter att inkoppla på samma sätt.
Men vänta, vad gör vi om .item-9 lite överviktig?
Nu blir det intressant; .item-9 passar inte längre in i kolumnen i slutet så det skjuts ner till nästa rad. Eftersom det inte passar in i något bortom .item-7 det stannar sätta. .post-10, du kanske kan tänka dig, skulle tucka sig in under .item-6 igen, men om du kommer ihåg det söker en ledig kolumn, då misslyckas det att den rör sig ner en rad och skjuter över till vänster igen. Detta är ett viktigt begrepp att förstå.
Om du tittar på tidigare demo ser du det .post-18, vid att inte hitta utrymme bredvid .post-17, har flyttat ner en rad. Vi definierade bara fem rader, men Grid har antagit att vi vill ha en annan rad att kliva på. Detta beror på grid-auto-flöde, som tillhör gridelementet och vars standardvärde är rad. Vi kan ändra detta värde till kolumn om vi vill, vilket helt skulle förändra hur vårt nät ser ut:
Det här ser ut ungefär liknande, men du märker att våra objekt har slits längst upp till vänster, sedan flyttas ner för att fylla varje rad, sedan flyttas över till andra kolumnen och så vidare. Så nu när ett föremål är för stort för stövlarna, söker följande föremål till nästa lediga radutrymme, då misslyckas det över till nästa kolumn.
Vi kan lägga till ett annat sökord i vår grid-auto-flöde egendom, och det är kanske min favorit CSS-nyckelord hittills: tät. Dess standard motsvarighet är gles (min andra favorit). Låt oss göra följande:
rutnät-auto-flöde: rad tät;
Notera: Vi behöver inte inkludera rad här är det underförstått, men detta lyfter fram hur syntaxen fungerar.
Nu vår vän .post-10, vid att finna att det inte finns något utrymme bredvid .item-9, först kontrollerar vad som är ovan innan du flyttar till en annan rad.
Tack vare denna förändring i placeringsalgoritmen är våra föremål nu tätt packade, vilket ger oss ett mer effektivt fyllt rutnät. Det betyder emellertid att den visuella layouten inte nödvändigtvis återspeglar dokumentkällans order, vilket inte alltid kan vara till hjälp för användaren.
Låt oss sammanfatta:
grid-auto-flöde från rad till kolumn.grid-auto-flöde accepterar ett nyckelord för att beskriva "packning" -metoden. Som standard är detta värde gles, men vi kan ändra detta till tät som försöker fylla i alla tillgängliga luckor.