Hvordan opretter du et layout med CSS Grid?

Question

Accepted Answer

**CSS Grid** er et todimensionalt layoutsystem — det styrer **rækker og kolonner samtidigt**, i modsætning til Flexbox's enkelt linje. Du definerer et grid på containeren og placerer elementer i det.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## Fr-enheden og repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("brøkdel") fordeler tilgængelig plads — `1fr 2fr` deler den 1:2. `repeat(3, 1fr)` er stenografi for tre lige spor.

## Responsivt grid UDEN mediespørgsmål

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

Denne ene linje skaber et fuldt responsivt kortkort: hver kolonne er mindst `250px`; browseren passer **så mange som muligt** pr. række og ombryder resten — skifter automatisk fra 4 kolonner på skrivebord til 1 på mobil. `auto-fit` + `minmax` er et af Grids mest elskede mønstre.

## Placering af elementer på tværs af celler

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

Elementer kan strække sig over flere rækker/kolonner, hvilket muliggør magasinlignende layouts, der er ubehjælpsomme med Flexbox.

## Grid vs Flexbox

- **Grid** — 2D-layout (rækker *og* kolonner): sidelayouts, kortgrids, dashboards.
- **Flexbox** — 1D-layout (en enkelt række eller kolonne): navigationsbjælker, knapgrupper, centrering.

De komponerer godt — en gridcelle kan selv være en flex-container.

## Hvorfor det betyder noget

Grid er det mest kraftfulde CSS-layoutværktøj — det håndterer fuldsideslayouts og responsive kortgrids rent, og erstatter ofte indlejrede div-hacks.

Alene `auto-fit`/`minmax`-responsivmønsteret fjerner behovet for mange mediespørgsmål.