Spacing mellem elementer har længe været en af de mest irriterende
Spacing mellem elementer har længe været en af de mest irriterende opgaver i Divi. Du sætter en margin på et modul, og pludselig flytter det sig uventet, når skærmstørrelsen ændrer sig, eller når du tilføjer et nyt element ved siden af. Gap-egenskaben i Divi 5's flexbox-system løser præcis det problem, og den ottende del af serien om flexbox viser hvorfor.
Gap er indbygget i containeren, ikke i det enkelte modul
Den store forskel mellem margin og gap er, hvor spacingen defineres. Margin sættes på hvert enkelt modul, og skal derfor styres individuelt. Det bliver hurtigt rodet, så snart et layout har flere rækker eller kolonner, og du ender med at holde styr på ti forskellige tal i stedet for ét. Gap gør det modsat. Den defineres én gang på selve flex-containeren og styrer automatisk afstanden mellem alle børneelementer.
Du skal altså ikke længere sidde og tælle margin-værdier op for hvert eneste modul for at få en ensartet afstand. Sæt gap-værdien på containeren, og resten fordeler sig selv, uanset om der er tre eller tredive elementer.
Flexbox
Sådan opfører gap sig i en flex-container
I en flex-container arbejder gap i to retninger samtidig. Row-gap styrer den lodrette afstand mellem rækker. Column-gap styrer den vandrette afstand mellem elementer i samme række. De to kan sættes hver for sig, eller sammen, alt efter hvad layoutet kræver.
Det praktiske ved den opdeling er, at du får fuld kontrol over begge akser uden at skulle lappe med ekstra padding eller margin på enkeltmoduler for at kompensere. Flytter et modul sig til en ny linje i et responsivt layout, følger spacingen automatisk med. Den sidder trods alt på containeren, ikke på det enkelte element, så den kan ikke glemme sig selv undervejs.
Fordi afstanden styres centralt fra containeren, er der ingen risiko for, at margin fra to naboelementer lægger sig oveni hinanden eller forsvinder helt.
Hvorfor gap giver mere stabilt spacing end margin
Margin har en kendt svaghed. Den kan kollapse mellem elementer under bestemte omstændigheder, og den skal ofte justeres manuelt på tværs af skærmstørrelser for at undgå uens afstande, hvilket i praksis betyder samme finjustering igen og igen på hvert breakpoint. Med gap opstår det problem ikke, fordi afstanden styres centralt fra containeren. Der er ingen risiko for, at margin fra to naboelementer lægger sig oveni hinanden eller bare forsvinder.
Det gør gap særligt værdifuldt i responsive layouts, hvor elementer flytter sig mellem rækker afhængigt af skærmbredden. Du slipper for at genberegne margin for hvert breakpoint. Containerens gap-værdi holder spacingen ensartet, uanset hvordan elementerne omarrangerer sig bag kulissen.
Det praktiske skifte for dig som Divi-bruger
Er du vant til at style spacing med margin på hvert modul, er overgangen til gap mest af alt en ny vane, ikke en teknisk omvæltning. Tankegangen flytter sig fra "hvor meget margin skal dette modul have" til "hvor meget luft skal der være mellem elementerne i denne container". Lille justering, stor gevinst over tid, for du slipper for at løse det samme spacing-puslespil forfra i hvert eneste modul.
Det er også en fin påmindelse om, hvorfor detaljer som denne betyder noget, selv når du ikke selv koder layoutet fra bunden. Redigerer du din side direkte og selv holder den ved lige, som man gør med en Lavprishjemmeside, er det netop den slags detalje, der afgør om layoutet stadig ser pænt og roligt ud, når du tilføjer et ekstra element eller skifter til mobilvisning. Værktøjet i baggrunden må gerne være usynligt. Resultatet skal bare holde.
For layouts med mange gentagne elementer, som produktgitre
For layouts med mange gentagne elementer, som produktgitre, portfolio-grids eller rækker af kort, er gap særligt nyttig. I stedet for at sætte margin på hvert enkelt kort, sætter du én gap-værdi på containeren og får en ensartet, forudsigelig afstand overalt.
Skal du opdatere ældre Divi-projekter til det nye flexbox-system, er det værd at gennemgå layouts med mange moduler i rækker først. Det er her gap-tilgangen giver den mest mærkbare forbedring i forhold til den gamle margin-baserede metode.