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.

Øvelse 1

Samme mål, to veje

I denne øvelse løser du en enkel opgave med både flex og grid. Pointen er at se, hvor tæt de to modeller faktisk kan komme på hinanden. Læg især mærke til, hvordan flex-wrap: wrap-funktionaliteten ikke kan efterlignes med grid.

Øvelse 2

Fra lighed til forskel

Her bliver forskellene mere synlige:

• 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.
• flex-wrap vs repeat(auto-fit, minmax(...)) viser forskel på flow-baseret og spor-baseret tænkning.

Øvelse 3

Cards med forskelligt indhold

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.

Øvelse 4

Samme layout, to strategier

Her ser du en klassisk “tekst + billede”-sektion løst på to måder:

• Grid-versionen beskriver layoutet eksplicit med kolonner ved et breakpoint.
• Flex-versionen bruger wrap og basisstørrelser, så layoutet tilpasser sig mere flydende.

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

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”.