Gridrader och automatisk placering

När du placerar element i ett rutnät skapar CSS Grid rader på två sätt: explicit (du definierar dem med grid-rows-*) eller implicit (webbläsaren skapar dem automatiskt när elementen inte får plats). Genom att förstå skillnaden kan du styra höjder exakt när det behövs eller låta webbläsaren hantera dem när innehållet varierar.

Tailwind tillhandahåller grid-rows-1 till och med grid-rows-6 för att definiera explicita radspår. Internt kompileras grid-rows-3 till grid-template-rows: repeat(3, minmax(0, 1fr)). Dessa rader delar lika på containerns tillgängliga höjd. Det är mest användbart när containern har en fast höjd eller en höjd angiven i procent.

När det finns fler element än de explicita raderna rymmer skapar webbläsaren implicita rader. Som standard får dessa implicita rader en höjd som anpassas efter innehållet. Du kan styra höjden med anpassad CSS eller Tailwinds syntax för godtyckliga värden, till exempel genom att ange radhöjden med en inline style eller använda verktygen auto-rows-* som finns i nyare Tailwind-versioner.

Egenskapen grid-flow styr algoritmen för automatisk placering – alltså ordningen i vilken elementen fyller tillgängliga celler i rutnätet. Tailwinds grid-flow-row (standard) fyller varje rad från vänster till höger innan den går vidare nedåt. grid-flow-col fyller varje kolumn uppifrån och ned innan den går vidare åt höger. Skillnaden motsvarar ungefär att läsa en bok från vänster till höger jämfört med att läsa en tidning kolumn för kolumn.

När du använder grid-flow-col ändras algoritmen för automatisk placering så att kolumner fylls först. Tillsammans med grid-rows-*, som begränsar hur hög varje kolumn får bli, skapar detta ett vertikalt kortflöde i tidnings- eller Pinterest-stil. Elementen fyller den första kolumnen uppifrån och ned och fortsätter sedan automatiskt i nästa kolumn.

grid-flow-dense aktiverar en algoritm för tät packning, som låter webbläsaren fylla igen luckor efter stora element som sträcker sig över flera spår. Utan tät packning lämnar ett rutnät med sådana element luckor eftersom placeringen följer en strikt ordning. Tät packning passar perfekt för bildgallerier där du vill ha en kompakt mosaik utan outnyttjat utrymme.

Du kan kombinera flödesriktning och täthet med grid-flow-row-dense eller grid-flow-col-dense. Varianten med row fyller rader först men fyller sedan igen eventuella luckor, medan varianten med col fyller kolumner först och fyller igen luckor. Det här är standardverktygen för galleriliknande layouter med kort i blandade storlekar, där utseendet är viktigare än en strikt ordning.

Om du definierar både grid-rows-* och grid-cols-* tillsammans får du en fullständigt specificerad rutnätsmall, ungefär som i ett kalkylblad. Varje cell i mallen får en förutsägbar position. Detta fungerar utmärkt för instrumentpanelslayouter där du vet exakt hur många sektioner du behöver och vill ha exakt kontroll över deras höjder och bredder.

Tailwinds syntax för godtyckliga värden låter dig skriva valfritt CSS-värde inom hakparenteser. För rutnätsrader kan du använda grid-rows-[100px_1fr_auto] för att definiera ett fast sidhuvud på 100px, ett flexibelt innehållsområde och en automatiskt dimensionerad sidfot. Detta är mer koncist än att skriva inline-format och drar nytta av JIT-kompilering till din produktions-CSS.

När du bygger rutnät med kort med dynamiskt innehåll vill du ofta ha enhetliga minsta radhöjder, så att kort med lite innehåll inte ser oproportionerligt små ut. Genom att använda grid-auto-rows via inline-format eller Tailwinds godtyckliga JIT-variant [grid-auto-rows:200px] kan du se till att varje rad är minst så hög som behövs. Detta förhindrar störande variationer i höjd i datadrivna listor.

Här sätter vi ihop allt i ett komplett applikationsskal som använder CSS Grid för den yttre layouten. grid-rows definierar höjderna för sidhuvud, innehåll och sidfot. Inuti innehållsraden delar ett kapslat mönster med grid-cols-[sidebar_main] upp skärmen. Detta tillvägagångssätt är rent och förutsägbart och kräver ingen absolut positionering eller några flexbox-hack för strukturen på den översta nivån.

I den här lektionen har du lärt dig att: grid-rows-* definierar explicita radspår med lika höga rader, grid-flow-row och grid-flow-col styr placeringsriktningen och grid-flow-dense fyller igen luckor som objekt som sträcker sig över flera celler lämnar efter sig. Nästa steg är mellanrumsverktyg och justeringskontroller i rutnätsbehållare.