Implicit grid og grid-auto-flow

Det eksplicitte gitter defineres af grid-template-columns og grid-template-rows. Når elementer flyder ud over disse definerede spor, opretter browseren automatisk implicitte spor.

Definerer størrelsen på implicit oprettede rækkespor. Uden denne egenskab får implicitte rækker en størrelse, der passer til deres indhold (auto).

Gør implicitte rækker mindst en bestemt højde, men stadig udvidelige:

Definerer størrelsen på implicitte kolonnespor, når elementer placeres uden for det eksplicitte kolonneområde:

Styrer, hvordan auto-placeringsalgoritmen placerer elementer:

• row (standard) — placér i rækker, og tilføj nye rækker efter behov
• column — placér i kolonner, og tilføj nye kolonner
• row dense — udfyld huller aggressivt ved at gå tilbage i placeringen
• column dense — tæt udfyldning i kolonnernes retning

dense får algoritmen til at forsøge at udfylde huller, som elementer, der spænder over flere spor, efterlader. Det kan få elementer til at blive vist i en anden rækkefølge end forventet.

Vandret rullende kortstribe, hvor kolonner vokser efter behov:

Et fotogalleri med elementer i forskellige størrelser, der udfylder huller:

Navngivne områder gælder kun for det eksplicitte gitter. Elementer, der placeres i det implicitte gitter, kan ikke bruge placering med navngivne områder direkte — de kræver placering ved hjælp af linjenumre eller span.

I Chrome DevTools viser layout-overlejringen både eksplicitte gitterlinjer (fuldt optrukne) og implicitte gitterlinjer (stiplede). Det hjælper dig med at forstå, hvor auto-placerede elementer ender.

Elementer, der spænder over flere rækker i det implicitte gitter, har brug for grid-auto-rows for at få den korrekte størrelse. Uden denne egenskab tilpasses implicitte rækker til indholdet, hvilket kan skabe ujævne layouts.

Det implicitte gitter udvider det eksplicitte gitter med automatisk oprettede spor. grid-auto-rows/columns styrer deres størrelse; minmax() gør dem fleksible. grid-auto-flow angiver placeringsretningen. Tæt pakning med dense udfylder huller aggressivt — det er nyttigt til mosaiklignende layouts, men kan ødelægge den visuelle rækkefølge.