Flex vs. Grid i praksis

Grid eller Flex?

• “Grid eller Flex?” er et nyttigt startspørgsmål, men ofte er “hvad er min layout-intent?” bedre.
• Tænk i flow først: hvordan skal elementer bryde, flytte og skalere, når pladsen ændrer sig?
• Brug gerne begge modeller i samme UI: fx grid til side/layout og flex til intern fordeling i komponenter.
• Træn med variationer af samme opgave. Erfaring gør valg hurtigere og mindre dogmatiske.

Normalt flow er udgangspunktet: blokke følger efter hinanden, og tekst bryder i linjer. Brug først en layoutmodel, når du har brug for en bestemt relation mellem elementerne, fx en række links eller fælles kolonner. Et layout behøver ikke Grid eller Flex overalt.

Øvelse 1

En klassisk navigationsmenu

Lav en klassisk navigationsmenu med både Flexbox og Grid. Undersøg først, hvordan links fordeler sig på én række, og gør derefter pladsen mindre. Flex kan bryde en række efter elementernes indhold med flex-wrap: wrap; Grid fordeler elementerne i spor og har ikke den samme wrapping-mekanisme.

Åbn øvelse 1 uden løsning. Brug gennemgangen herunder til at sammenligne løsninger.

Øvelse 2

En enkelt række

Lav en enkelt række med begge modeller. Slå overskriften til i gennemgangen, så elementerne ikke længere har samme indhold. Undersøg, om pladsen fordeles ud fra indholdet eller med lige brede kolonner:

• flex: 1 og grid-auto-columns: 1fr kan ligne hinanden visuelt.
• min-width: 0 og minmax(0, 1fr) løser samme slags overflow-problemer på hver sin måde.
• Sammenlign flex-grow: 1 med flex: 1: samme vækstfaktor giver ikke nødvendigvis samme slutbredde, når udgangspunktet er forskelligt.

Åbn øvelse 2 uden løsning. Brug gennemgangen herunder til at sammenligne løsninger.

Øvelse 3

Cards med forskelligt indhold

Sammenlign flex-wrap med repeat(auto-fit, minmax(...)), når rækken bliver smallere. Når card-indhold har forskellig længde, bliver “hvad er nemmest at holde stabilt?” et praktisk spørgsmål:

• Med flex ender du tit med display: flex; flex-direction: column; i hvert card og margin-top: auto på knappen.
• Med grid kan du få mere ens opbygning i rækkerne, og i denne øvelse bruges også subgrid til at synkronisere struktur.

Åbn øvelse 3 uden løsning. Brug gennemgangen herunder til at sammenligne løsninger.

Øvelse 4

Samme layout, to strategier

Lav en responsiv “tekst + billede”-sektion, hvor billede og tekst skifter visuel rækkefølge, når pladsen ændrer sig:

• Grid-versionen beskriver layoutet med kolonner ved et breakpoint og flytter billedet med order: -1.
• Flex-versionen bruger flex-flow: wrap row-reverse og basisstørrelser, så rækkefølge og linjeskift tilpasser sig pladsen.

Den visuelle omrokering ændrer ikke HTML-rækkefølgen. Sørg derfor for, at indholdet også giver mening i dokumentets læserækkefølge.

Begge løsninger kan være rigtige. Valget afhænger af, om du vil optimere for præcis kontrol eller robust flow.

Åbn øvelse 4 uden løsning. Brug gennemgangen herunder til at sammenligne løsninger.

Hvad vælger jeg så i praksis?

Brug denne mini-checkliste:

1. Hvis opgaven primært er fordeling i én akse: start med flex.
2. Hvis opgaven kræver tydelige kolonner/rækker: start med grid.
3. Hvis du skal have både struktur og intern fordeling: brug begge modeller sammen.
4. Hvis koden bliver svær at læse: skift model, selv hvis den nuværende “virker”.