TL;DR
- Flexbox er typisk content-first og endimensionalt; Grid er relationship-first og todimensionalt.
- De to modeller konkurrerer ikke – de bruges ofte sammen på forskellige niveauer.
auto-fit,minmax()ogmin()kan gøre et grid responsivt uden et breakpoint for hvert kolonneantal.
Flexbox eller Grid?
Vælg layoutmodel ud fra den relation, containeren skal beskrive:
- Brug Flexbox, når indhold primært skal fordeles i én række eller kolonne.
- Brug Grid, når rækker og kolonner skal danne en fælles struktur.
- Kombinér dem, fx Grid til et korts overordnede områder og Flexbox til handlingerne i kortets footer.
En navigation kan ofte bygges med begge dele. Forskellen viser sig, når indholdet vokser, wrapper eller skal justeres på tværs af flere rækker. Derfor er det mere nyttigt at spørge “hvilken relation beskriver jeg?” end “hvilken teknologi er bedst?”.
Et intrinsisk grid
Et klassisk card-grid behøver ikke kende antallet af kolonner på forhånd:
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1rem;}Delene har hver sin opgave:
auto-fitopretter så mange tracks, som der er plads til, og kollapser tomme tracks.minmax()giver hvert track et minimum og et fleksibelt maksimum.min(17rem, 100%)forhindrer minimumsbredden i at være bredere end en meget smal container.1frfordeler den resterende plads mellem de udfyldte tracks.
Det er intrinsisk responsivitet: layoutet reagerer på tilgængelig plads og indholdets grænser i stedet for en liste over enheder.
Defensive detaljer
Selv et godt grid kan få overflow på grund af lange ord, URLs eller minimumsstørrelser. Test derfor mellem de kendte viewport-presets, og husk især:
.grid-item { min-inline-size: 0; overflow-wrap: anywhere;}Undgå også visuel reorder af interaktive elementer med order, *-reverse
eller tæt grid-pakning. DOM-rækkefølgen styrer stadig læse- og fokusordenen.