Flexbox vs Grid – den hurtige beslutning til dit næste layout

Den ultrakorte regel: 1 dimension vs. 2 dimensioner

Du har to værktøjer i CSS til moderne layout: Flexbox og Grid. De kan mange af de samme ting, og det er dér forvirringen starter.

Den huskeregel jeg selv bruger er:

• Flexbox: når du primært styrer én retning (række eller kolonne).
• Grid: når du styrer begge retninger samtidig (rækker og kolonner).

Tænk: skal du bare have elementer pænt på række med mellemrum, eller bygger du et decideret skema/bræt med celler? Række = Flexbox. Skema = Grid.

Resten af artiklen er 8 små cases, hvor vi vælger Flexbox eller Grid og skriver minimum CSS, så du kan kopiere løsningerne direkte ind i dit projekt.

8 mini-cases: vælg Flexbox eller Grid

Jeg antager her, at du har en grundlæggende idé om HTML og CSS. Hvis du er helt ny, kan du evt. tage et kig på HTML og CSS for begyndere først.

1. Navbar med spacing og align (Flexbox)

Problem: Du vil have en simpel topmenu: logo til venstre, links til højre, pænt centreret lodret.

Vælg: Flexbox. Du arbejder langs én akse: vandret.

<header class="nav">
  <div class="logo">Logo</div>
  <nav class="links">
    <a href="#">Home</a>
    <a href="#">Blog</a>
    <a href="#">Kontakt</a>
  </nav>
</header>

.nav {
  display: flex;
  justify-content: space-between; /* spreder logo og links */
  align-items: center;            /* centrer lodret */
  padding: 1rem 2rem;
}

.links {
  display: flex;
  gap: 1.5rem; /* mellemrum mellem links */
}

Hvornår giver Grid mening her? Næsten aldrig. En navbar er typisk lineær: venstre til højre.

2. Kort-liste med wrapping (Flexbox)

Problem: Du har en række “cards” (f.eks. blogindlæg), som skal ligge ved siden af hinanden og hoppe ned på flere rækker på små skærme.

Vælg: Flexbox. Du arbejder i udgangspunktet horisontalt, men vil gerne tillade ombrydning.

<section class="card-list">
  <article class="card">...</article>
  <article class="card">...</article>
  <article class="card">...</article>
  <article class="card">...</article>
</section>

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 250px; /* grow, shrink, basis */
  border: 1px solid #ddd;
  padding: 1rem;
}

Nøglen er flex-wrap: wrap og en fornuftig flex-basis som udgangspunkt for bredden.

Her kan Grid også bruges, men Flexbox er ofte hurtigere at skrive og mere intuitiv til “kort der bare skal flyde”.

3. Klassisk side-layout med sidebar (Grid)

Problem: Du vil lave et layout med hovedindhold og en sidebar. På desktop: to kolonner. På mobil: én kolonne.

Vælg: Grid. Du styrer både rækker (header, main, footer) og kolonner (indhold, sidebar).

<div class="page">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Indhold</main>
  <footer>Footer</footer>
</div>

.page {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;
  min-height: 100vh;
}

header {
  grid-column: 1 / 3; /* strækker sig over begge kolonner */
}

footer {
  grid-column: 1 / 3;
}

Responsivt skift til én kolonne:

@media (max-width: 768px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
  }

  header,
  footer {
    grid-column: 1; /* kun én kolonne alligevel */
  }
}

Her gør Grid det helt tydeligt, hvilke områder der fylder hvor. Du kan faktisk tænke layoutet som et skema på papir.

4. Galleri med ens kolonner (Grid)

Problem: Du vil lave et billedgalleri med 2, 3 eller 4 kolonner alt efter skærmbredden. Alle billeder skal have samme bredde og automatisk hoppe om.

Vælg: Grid. Du vil have et net af ens kolonner.

<section class="gallery">
  <img src="..." alt="" />
  <img src="..." alt="" />
  <img src="..." alt="" />
  <img src="..." alt="" />
</section>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.gallery img {
  width: 100%;
  display: block;
  object-fit: cover;
}

auto-fit + minmax er guld her. Browseren lægger så mange kolonner ind som muligt, så længe hver kolonne er mindst 150px bred.

Man kan også lave gallerier med Flexbox, men du får typisk mindre kontrol over rækkerne.

5. “Holy grail” layout (Grid + media queries)

Problem: Du vil lave det klassiske layout med:

• Header øverst
• Navigation til venstre
• Indhold i midten
• Ekstra sidebar til højre
• Footer nederst

Vælg: Grid. Det her er virkelig et 2D-problem.

<div class="layout">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
  <aside class="extra">Ekstra</aside>
  <footer>Footer</footer>
</div>

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   extra"
    "footer footer footer";
  min-height: 100vh;
}

header  { grid-area: header; }
nav     { grid-area: nav; }
main    { grid-area: main; }
.extra  { grid-area: extra; }
footer  { grid-area: footer; }

Responsivt ned på mobil til ét spor:

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "extra"
      "footer";
  }
}

Grid-areas gør layoutet nemt at læse, selv om du kigger på koden en uge senere.

6. Centrer en boks perfekt (Flexbox)

Problem: Du skal have en loader, en modal eller en lille besked-boks centreret både vandret og lodret i en container.

Vælg: Flexbox. Den er stærk til align langs begge akser, når der kun er få elementer.

<div class="wrapper">
  <div class="box">Hej</div>
</div>

.wrapper {
  display: flex;
  justify-content: center; /* horisontalt */
  align-items: center;     /* vertikalt */
  min-height: 100vh;
}

.box {
  padding: 2rem;
  background: #eee;
}

Ja, man kan også centrere med Grid (place-items: center), men i rigtigt mange komponenter er Flexbox alligevel til stede i forvejen.

7. Form-layout med labels og inputs (Grid)

Problem: Du vil lave en formular, hvor labels ligger pænt til venstre, inputs til højre, og lange felter (f.eks. tekstarea) fylder begge kolonner.

Vælg: Grid. Du bygger et lille skema.

<form class="form">
  <label for="name">Navn</label>
  <input id="name" />

  <label for="email">Email</label>
  <input id="email" />

  <label for="msg">Besked</label>
  <textarea id="msg"></textarea>

  <button class="submit">Send</button>
</form>

.form {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0.75rem 1rem; /* rækker, kolonner */
  align-items: center;
}

.form label {
  justify-self: end; /* labels højrejusteres op mod feltet */
}

.form textarea {
  grid-column: 1 / 3; /* fylder begge kolonner */
  min-height: 120px;
}

.form .submit {
  grid-column: 2; /* knappen under felter */
  justify-self: start;
}

På små skærme kan du så skifte til én kolonne:

@media (max-width: 600px) {
  .form {
    grid-template-columns: 1fr;
  }

  .form label,
  .form textarea,
  .form .submit {
    grid-column: 1;
    justify-self: stretch;
  }
}

Her bliver det tydeligt, hvorfor Grid er rar: du kan nemt lade enkelte felter springe kolonner over.

8. Kombiner Grid og Flexbox i samme komponent

Problem: Du vil lave et kort med billede, titel, tekst og en lille række knapper nederst, der skal fordele sig pænt.

Vælg: Grid til kortets overordnede layout, Flexbox til knappernes række.

<article class="product">
  <img src="..." alt="" />
  <h2>Titel</h2>
  <p>Beskrivelse...</p>
  <div class="actions">
    <button>Læs mere</button>
    <button>Køb</button>
  </div>
</article>

.product {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.75rem;
  border: 1px solid #ddd;
  padding: 1rem;
}

.product img {
  width: 100%;
  display: block;
}

.actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

Det her mønster bruger jeg hele tiden: Grid til “boksen som helhed”, Flexbox inden i til små linære layouts. Du behøver ikke vælge enten-eller per side, du vælger per problem.

Typiske fejl: overflow, minmax, auto-fit/auto-fill og gap

Nogle ting går igen, når man starter med Flexbox og Grid. Jeg har lavet dem alle, så du slipper for at debugge dem i to timer.

Overflow i Flexbox

Problemet: Dine flex-items bliver alt for små, eller de presser sig ud over kanten på containeren.

• Sørg for at bruge flex-wrap: wrap;, hvis bredden ikke må tvinges ned.
• Brug flex: 1 1 200px; i stedet for bare flex: 1;, så du har en fornuftig minimumsbredde.
• Pas på faste widths i px inde i flex-items. Store billeder uden max-width: 100% er klassikeren.

Forstå minmax i Grid

minmax(min, max) styrer, hvor lille og hvor stor en kolonne må være.

• minmax(200px, 1fr): mindst 200px, men kan vokse og dele pladsen ligeligt.
• minmax(0, 1fr): må krympe helt ned til 0, deler resten af pladsen ligeligt.

Jeg bruger tit minmax(150px, 1fr) i gallerier. Så ved jeg, at en kolonne aldrig bliver dumt lille.

auto-fit vs auto-fill i Grid

De ligner hinanden, men opfører sig forskelligt når der er “tom plads”.

• auto-fit folder tomme spor sammen og lader de eksisterende kolonner fylde ekstra.
• auto-fill holder tomme spor i gridet, så man teoretisk har flere, men de er bare tomme.

Til responsive gallerier vil du næsten altid bruge auto-fit. Det ser pænere ud, når der er få elementer.

Glemte gap og for meget margin

Med Flexbox og Grid kan du (ofte) droppe margin mellem elementer og bruge gap i stedet.

.container {
  display: flex;
  gap: 1rem;   /* i stedet for margin-right på børnene */
}

gap virker både på Flexbox og Grid i moderne browsere, og det er meget nemmere at justere ét sted. Brug margin til ydre afstand, gap til indre afstand mellem items.

Tjekliste: sådan vælger du hurtigt i dit næste projekt

Når du sidder med dit næste layout-problem, kan du bruge den her lille mentale tjekliste. Jeg tænker ofte præcis sådan, når jeg koder.

1. Hvor mange dimensioner styrer du?

• Kun rækkefølgen horisontalt eller vertikalt → start med Flexbox.
• Både kolonner og rækker, med områdelayout → start med Grid.

2. Er det et “område-layout” eller en “linje af ting”?

• Header / main / aside / footer, dash-boards, forms med labels → Grid.
• Navbars, knaprækker, tag-lister, små komponenter → Flexbox.

3. Skal elementerne wrappe på en naturlig måde?

• Cards der bare skal hoppe ned på næste linje > Flexbox med flex-wrap.
• Responsivt net, hvor du styrer min/max bredde pr. kolonne > Grid med auto-fit + minmax.

4. Har du brug for at specificere celler meget præcist?

• Hvis du gerne vil sige “den her ting skal ligge fra kolonne 2 til 4” → Grid.
• Hvis du mest flytter elementer forrest/bagerst i rækken → Flexbox (evt. med order).

5. Kombination er normen, ikke undtagelsen

Det meste moderne layout ender som en kombination:

• Overordnet side-layout i Grid.
• Inde i sektionerne: Flexbox til små rækker af ting.

Hvis du vil øve dig i kombinationen, kan du prøve at bygge en simpel forsidestruktur og gradvist bytte dine gamle float-baserede ting ud med Flexbox og Grid. Det er sjældent du skriver ét stort layout kun med det ene.

Sådan kan du bygge videre

Hvis du vil have Flexbox og Grid helt ind i fingrene, så vælg 2-3 komponenter fra dit næste projekt og beslut dig for: “den her løser jeg med Flexbox” og “den her løser jeg med Grid”. Stil efter minimal CSS hver gang.

Du kan også lege med små øvelser, f.eks.:

• Byg en responsiv navbar kun med Flexbox og gap.
• Lav et simpelt dashboard-grid med grid-template-areas.
• Klon et layout fra en favorit-side og gæt: hvilke dele er Flex, hvilke er Grid?

Hvis du vil dykke dybere i CSS layout, kan du kigge på flere artikler under vores CSS kategori eller fx vores gennemgang af responsive layouts i CSS, når du er klar til det næste skridt.

Jeg er ret sikker på, at vi om få år ser endnu flere layout-features i CSS. Spørgsmålet er nok mest, hvor længe du kan holde fast i gamle vaner, før Flexbox og Grid føles lige så naturlige som at skrive <div>.