Share
I tidigare tutorials har vi lärt oss hur du konfigurerar ett rutnät, definierar dess explicit egenskaper (som grid-template-kolonner och grid-template-områden) och även några av dess implicita egenskaper (som grid-auto-kolonner). I denna handledning ska vi titta på shorthandegenskapen rutnät som snabbt behandlar alla ovanstående i ett enda uttalande.
Som vanligt börjar du med att förklara display: rutnät; på din behållare. Använd sedan rutnät egenskap för att lägga ut dina rader, då dina kolumner:
.rutnät 1 display: rutnät; rutnät: 100px auto 300px / repeat (2, 1fr) 100px;
Ovanstående uttalande säger att vi vill ha tre uttryckliga rader på 100px, auto och 300px. Och (med hjälp av upprepa() funktion) två kolumner av 1fr, sedan en av 100px. Det är exakt samma som den här längre versionen:
.rutnät 1 display: rutnät; raster-mall-rader: 100px auto 300px; rutmall-kolumner: upprepa (2, 1fr) 100px;
Båda uttalandena ger oss följande:
Implicita värden är det vi ber Grid att använda bortom de uttryckliga värdena vi definierar. I rutnät stenografi vi kan inte kombinera de två så vi måste göra ett val. Ta en titt på detta, till exempel:
.rutnät 1 display: rutnät; rutnät: auto-flöde 100px / 1fr 100px;
I det här fallet har vi fastnat med explicit kolumner (en av 1fr, en annan av 100px) men våra rader använder en förkortad form av grid-auto-flöde och grid-auto-rader. Det står "När du behöver lägga till fler spår i rutnätet, lägg till dem som rader. Och gör varje 100px hög. " Det är detsamma som det här:
.rutnät 1 display: rutnät; rutnätmall-kolumner: 1fr 100px; rutnät-auto-flöde: rad; raster-auto-rader: 100px;
Detta är ganska standardbeteende, men vi ser en större förändring om vi istället frågar vårt implicita rutnät att använda extra kolumner:
.rutnät 1 display: rutnät; rutnät: 100px 300px / auto-flow 100px;
Detta ger oss två rader på 100px och 300px, och sätter sedan effektivt in grid-auto-flow: kolumn;. Det är detsamma som:
.rutnät 1 display: rutnät; raster-mall-rader: 100px 300px; grid-auto-flow: kolumn; rutnät-autokolumner: 100px;
Nu placerar auto-placeringsalgoritmen objekt från topp till botten, och lägger till kolumner till höger när det går tom för rymden:
Notera: Vi kan inte deklarera auto-flöde på båda raderna och kolumner som inte fungerar.
Om du tänker tillbaka till vår handledning Förstå CSS-nätverket "Auto-Placement Algorithm" kommer du ihåg att vi diskuterade gles och tät; nyckelord som beskriver hur sakerna packas in i ett nät. Dessa kan också användas tillsammans auto-flöde, så här:
.rutnät 1 display: rutnät; rutnät: 100px 300px / auto-flow tät 100px;
Mallområden är ett sätt att namnge delar av vårt nät, på det som är nästan visuellt representativt. I sin enklaste form skulle vi bara använda rutnät att beskriva våra mallområden och inget annat:
.rutnät 1 display: rutnät; rutnät: "header header header" "main main sidebar" "footer footer footer";
Då skulle vi ange vilket område varje nätobjekt fyller, så här:
.item-1 grid-area: header;
Om du kommer ihåg vår handledning för originalmallområden, hade vi några mer detaljer för att ge oss kolumn- och raddimensioner:
.rutnät 1 display: rutnät; rutmall-kolumner: repetera (3, 1fr); rutnät-rader: 80px 180px 80px; galler-mall-områden: "header header header" "main main sidebar" "footer footer footer";
Det kan vi också göra enligt följande:
.rutnät 1 display: rutnät; rutnät: "header header header" 80px "huvud huvud sidofält" 180px "footer footer footer" 80px / 1fr 1fr 1fr;
Vi lägger till kolumnbredderna efter det framåt snedstreck (the upprepa() funktionen fungerar inte i det här fallet, men jag vet inte varför). Och vi lägger till radhöjderna inline efter områdesdeklarationerna. Så här slutar vi med:
Denna handledning borde ha gett dig en förståelse för hur rutnät shorthand egendom fungerar. Leka med det, se vilka andra aspekter av CSS Grid-modulen du kan använda med det och låt oss veta hur mycket tid det sparar dig!
Accentsconagua