Share
Hittills har våra CSS grid tutorials fokuserat i stor utsträckning på explicit värdespårstorlekar som vi uttryckligen har definierat. Vi har använt rader som är 200px höga, eller kanske kolumner som är 1fr breda, och vi har uttryckligen angivit hur många av dem vi vill ha. Men vad händer om vi inte vet (eller vill inte begå) hur många spår vi vill ha? Det är där implicit värden kommer till spel-låt oss ta en titt.
Här är ett grundläggande rutnät som du kan gaffla för att följa med. Det ger oss en rutnätbehållare, med 9 rutnät. Inga kolumnbredder eller kvantiteter har ännu definierats, så varje föremål fyller maximalt tillgängliga bredd:
Låt oss föreställa oss att vi vill ha en kolumn till vänster och att vi vet exakt hur bred vi vill ha det: 300px. Vi kan definiera det genom att lägga till rutnätmall-kolumner: 300px; till vår rutnät. Men vi kommer inte att få några andra kolumner om vi inte uttryckligen definiera dem:
Det vill säga, om vi inte säger att vi vill att ett av rutnätet ska placeras i (till exempel) kolumn 3 på rad 1:
.punkt-3 grid-column: 3; rutnät: 1;
Det ger oss då extra kolumner utanför vårt definierade rutnät eftersom CSS Grid kommer att använda ledigt utrymme och dess automatisk placeringsalgoritm för att ta reda på var allting går.
Det här är bra, och Grid kommer att göra antaganden även om vi vill ha fler kolumner utan att vi behöver definiera var och en. Men vad händer om vi vill ha de implicita spåren, hur många som finns, att ha en viss bredd? Det är där grid-auto-kolonner kommer i spel.
Om vi vill ha alla kolumner förutom den första som är 100px breda, kan vi implicit säga att:
rutnät-autokolumner: 100px;
Parat med vårt uttryckliga värde får vi det bästa av båda världarna. Här säger vi att vi vill att den första kolumnen ska vara 1fr (att det tar upp en bråkdel av vad som helst utrymme kvar-bil skulle ha samma effekt här) och att några andra kolumner efter det borde vara 100px exakt:
rutmall-kolumner: 1fr; rutnät-autokolumner: 100px;
Detta ger oss följande:
Och om vi konstaterar att punkt 3 verkligen borde placeras i kolumn 5, på rad 1, vet Grid hur bred det är att göra ytterligare kolumner eftersom det är underförstått.
Vi är inte heller begränsade till pixelvärden här heller; vi kunde använda fraktionsenheter, em enheter, även de min Max() notation som vi har diskuterat i tidigare handledning.
Det säger nästan självklart det grid-auto-rader kommer att göra detsamma för rader som grid-auto-kolonner gör för kolumner. Här är ett exempel där alla rader men de två första är fasta i en höjd av 200px.
Många av Grids egenskaper har standardvärden som kommer att ta hand om dig om du inte definierar något annat, men vid vissa tillfällen måste vi åtminstone innebära vad vi vill ha. Med implicit spårning kan vi ange vilken storlek som helst extra rader eller kolumner ska vara, om de någonsin behövs.
Accentsconagua