Inzicht in Auto-plaatsing en grid-auto-flow

In CSS Grid bepaalt het auto-plaatsingsalgoritme hoe grid-items automatisch worden gepositioneerd wanneer hun locatie niet expliciet is toegewezen. Dit proces wordt geregeld door de eigenschap grid-auto-flow, die bepaalt of items per rij of per kolom worden geplaatst, en of de browser lege ruimtes compacter moet opvullen. Standaard worden grid-items geplaatst in rij-volgorde: elk item vult de eerstvolgende beschikbare cel in de huidige rij voordat wordt doorgegaan naar de volgende rij. De eigenschap grid-auto-flow kan worden ingesteld op row, column of dense, waarbij elke optie de lay-out op een andere manier beïnvloedt.

Belangrijke punten:

• Het auto-plaatsingsalgoritme regelt de positionering van items tenzij een locatie is opgegeven;
• De eigenschap grid-auto-flow bepaalt of items per rij of per kolom worden geplaatst;
• Gebruik het sleutelwoord dense om compacter te vullen door gaten op te vullen die zijn ontstaan door expliciete plaatsingen of grotere items;
• Standaardgedrag is row-volgorde, waarbij elke rij wordt gevuld voordat naar de volgende wordt gegaan;
• Het wijzigen van grid-auto-flow beïnvloedt hoe het grid zich aanpast aan de inhoud en de volgorde van items.

Opmerking

Wisselen tussen grid-auto-flow: row, grid-auto-flow: column en grid-auto-flow: row dense beïnvloedt de plaatsing van grid-items A–E wanneer één item (C) expliciet is gepositioneerd. De rangschikking en opvulling van items veranderen afhankelijk van de gekozen flowmodus.

Auto-plaatsing en Expliciet Gepositioneerde Items

Wanneer sommige items expliciet op het grid worden geplaatst met eigenschappen zoals grid-column of grid-row, slaat het auto-plaatsingsalgoritme deze cellen over en plaatst de overige items in de eerstvolgende beschikbare posities. Dit betekent dat expliciet gepositioneerde items gaten in het grid kunnen veroorzaken, en automatisch geplaatste items vullen alleen de niet-bezette cellen op, volgens de volgorde en regels van grid-auto-flow. Bij gebruik van het sleutelwoord dense probeert de browser gaten die zijn ontstaan door expliciet geplaatste of grotere items alsnog op te vullen, waardoor het grid compacter wordt ingedeeld.

Tips voor dynamische lay-outs met automatische plaatsing

Om optimaal gebruik te maken van automatische plaatsing in dynamische of contentgestuurde lay-outs:

• Gebruik grid-auto-flow: row voor traditionele, rij-voor-rij vulling van het grid;
• Schakel over naar grid-auto-flow: column wanneer je wilt dat items eerst kolommen vullen voordat rijen worden gevuld;
• Voeg dense toe aan beide modi als je wilt dat de browser kleinere openingen opvult die zijn achtergelaten door expliciet geplaatste of grotere items;
• Combineer expliciete plaatsing voor speciale items met automatische plaatsing voor de rest, zodat je zowel controle als flexibiliteit behoudt;
• Test je lay-out met verschillende volgordes en hoeveelheden content om te verzekeren dat je grid zich aanpast zoals verwacht.