Gridrækker og automatisk placering

Når du placerer elementer i et gitter, opretter CSS Grid rækker på to måder: eksplicit (du definerer dem med grid-rows-*) eller implicit (browseren genererer dem automatisk, når elementerne går ud over gitteret). Når du forstår denne forskel, kan du styre højder præcist, når det er nødvendigt, eller lade browseren håndtere dem, når indholdets størrelse varierer.

Tailwind har grid-rows-1 til grid-rows-6 til at definere eksplicitte rækkespor. Internt kompileres grid-rows-3 til grid-template-rows: repeat(3, minmax(0, 1fr)). Disse rækker deler containerens tilgængelige højde ligeligt. Det er mest nyttigt, når containeren har en fast højde eller en højde baseret på en procentdel.

Når der er flere elementer, end dine eksplicitte rækker kan indeholde, opretter browseren implicitte rækker. Som standard får disse implicitte rækker en størrelse, der passer til deres indhold. Du kan styre deres højde med brugerdefineret CSS eller Tailwinds syntaks til vilkårlige værdier, for eksempel ved at angive rækkehøjden med en inline-typografi eller bruge værktøjerne auto-rows-*, som findes i nyere Tailwind-versioner.

Egenskaben grid-flow styrer algoritmen for automatisk placering — altså rækkefølgen, hvori elementer udfylder de tilgængelige gitterceller. Tailwinds grid-flow-row (standard) udfylder hver række fra venstre mod højre, før den går nedad. grid-flow-col udfylder hver kolonne oppefra og ned, før den går mod højre. Det svarer til forskellen mellem at læse en bog fra venstre mod højre og at læse en avis kolonne for kolonne.

Når du anvender grid-flow-col, ændres algoritmen for automatisk placering, så kolonner udfyldes først. Kombineret med grid-rows-* for at begrænse, hvor højt hver kolonne kan vokse, skaber det et lodret kortflow i avis- eller Pinterest-stil. Elementerne udfyldes nedad i den første kolonne og flyttes derefter automatisk til den næste kolonne.

grid-flow-dense aktiverer algoritmen til tæt pakning, som lader browseren udfylde huller efter store elementer, der spænder over flere spor. Uden tæt pakning efterlader et gitter med spanning huller, fordi placeringen følger en fast rækkefølge. Tæt pakning er ideel til billedgallerier, hvor du ønsker en kompakt mosaik uden spildplads.

Du kan kombinere flowretning og tæthed med grid-flow-row-dense eller grid-flow-col-dense. Varianten med row-dense udfylder rækker først, men udfylder også eventuelle huller, mens col-dense udfylder kolonner først og udfylder huller bagefter. Det er de foretrukne værktøjer til layout i galleristil med kort i blandede størrelser, hvor udseendet er vigtigere end en streng rækkefølge.

Hvis du definerer både grid-rows-* og grid-cols-* sammen, får du en fuldt specificeret gitterstruktur, der minder om et regneark. Hver celle i denne struktur har en forudsigelig placering. Denne tilgang fungerer rigtig godt til dashboard-layouts, hvor du ved præcis, hvor mange sektioner du har brug for, og vil have nøjagtig kontrol over deres højder og bredder.

Tailwinds syntaks for vilkårlige værdier lader dig skrive enhver CSS-værdi i kantede parenteser. For gitterrækker kan du bruge grid-rows-[100px_1fr_auto] til at definere en fast header på 100px, et fleksibelt indholdsområde og en footer med automatisk højde. Det er mere kompakt end at skrive inline-typografi og drager fordel af JIT-kompilering til din produktions-CSS.

Når du bygger kortgittere med dynamisk indhold, vil du ofte have ensartede minimumshøjder for rækkerne, så korte kort ikke ser meget små ud. Ved at bruge grid-auto-rows via inline-typografi eller Tailwinds JIT-syntaks for vilkårlige værdier [grid-auto-rows:200px] kan du sikre, at hver række mindst er så høj som nødvendigt. Det forhindrer markante forskelle i højden i datadrevne lister.

Her samler vi det hele i en komplet applikationsskal, der bruger CSS Grid til det ydre layout. grid-rows definerer højderne på header, indhold og footer. Inde i indholdsrækken opdeler et indlejret mønster med grid-cols-[sidebar_main] skærmen. Denne tilgang er enkel og forudsigelig og kræver hverken absolut positionering eller flexbox-tricks til strukturen på øverste niveau.

I denne lektion lærte du, at: grid-rows-* definerer eksplicitte rækkespor med ens højder, grid-flow-row og grid-flow-col styrer placeringsretningen, og grid-flow-dense udfylder huller efterladt af elementer, der spænder over flere spor. Næste gang ser vi på afstandsværktøjer og justeringskontroller i gittercontainere.