Forståelse af automatisk placering og grid-auto-flow

I CSS Grid bestemmer auto-placeringsalgoritmen, hvordan grid-elementer automatisk placeres, når du ikke eksplicit angiver deres placering. Denne proces styres af egenskaben grid-auto-flow, som afgør, om elementer placeres efter rækker eller kolonner, og om browseren skal forsøge at udfylde tomme pladser mere tæt. Som standard placeres grid-elementer i rækkeprioriteret rækkefølge: hvert element fylder den næste tilgængelige celle i den aktuelle række, før der fortsættes til næste række. Egenskaben grid-auto-flow kan indstilles til row, column eller dense, hvor hver indstilling påvirker layoutet på forskellige måder.

Vigtige punkter:

• Auto-placeringsalgoritmen håndterer placering af elementer, medmindre du angiver en placering;
• Egenskaben grid-auto-flow styrer, om elementer placeres efter række eller kolonne;
• Brug nøgleordet dense for at muliggøre tættere pakning ved at udfylde huller efterladt af eksplicit placerede eller større elementer;
• Standardadfærden er row-rækkefølge, hvor hver række fyldes før næste påbegyndes;
• Ændring af grid-auto-flow ændrer, hvordan dit grid tilpasser sig indhold og elementrækkefølge.

Bemærk

Skift mellem grid-auto-flow: row, grid-auto-flow: column og grid-auto-flow: row dense påvirker placeringen af grid-elementerne A–E, når ét element (C) er eksplicit placeret. Arrangementet og pakningen af elementerne vil ændre sig afhængigt af den valgte flow-tilstand.

Automatisk placering og eksplicit placerede elementer

Når du eksplicit placerer nogle elementer i grid'et ved hjælp af egenskaber som grid-column eller grid-row, springer auto-placeringsalgoritmen disse celler over og fortsætter med at placere de resterende elementer i de næste tilgængelige pladser. Dette betyder, at eksplicit placerede elementer kan skabe huller i grid'et, og automatisk placerede elementer vil kun udfylde de ubesatte celler i henhold til rækkefølgen og reglerne defineret af grid-auto-flow. Hvis du bruger nøgleordet dense, vil browseren forsøge at udfylde huller efterladt af eksplicit placerede eller større elementer og pakke grid'et tættere.

Tips til dynamiske layouts med automatisk placering

For at udnytte automatisk placering fuldt ud i dynamiske eller indholdsbaserede layouts:

• Brug grid-auto-flow: row for traditionel, række-for-række udfyldning af gitteret;
• Skift til grid-auto-flow: column, når du ønsker, at elementer skal udfylde kolonner før rækker;
• Tilføj dense til en af tilstandene, hvis du ønsker, at browseren skal udfylde mindre huller, der er efterladt af eksplicit placerede eller større elementer;
• Kombinér eksplicit placering for særlige elementer med automatisk placering for resten, hvilket giver både kontrol og fleksibilitet;
• Test dit layout med forskellige rækkefølger og mængder af indhold for at sikre, at dit gitter tilpasser sig som forventet.