Hur skapar du en layout med CSS Grid?

Question

Accepted Answer

**CSS Grid** är ett tvådimensionellt layoutsystem — det styr **rader och kolumner samtidigt**, till skillnad från Flexbox som är endimensionell. Du definierar ett rutnät på behållaren och placerar element 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 */
}
```

## Enheten fr och repeat()

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

`fr` ("fraction") fördelar tillgängligt utrymme — `1fr 2fr` delar det 1:2. `repeat(3, 1fr)` är genvägen för tre likvärdiga spår.

## Responsivt rutnät utan mediefrågor

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

Den här enkla raden skapar ett fullt responsivt kortrutnät: varje kolumn är minst `250px`; webbläsaren passar in **så många som möjligt** per rad och radbryter resten — växlar automatiskt från 4 kolumner på skrivbord till 1 på mobil. `auto-fit` + `minmax` är ett av Grids mest älskade mönster.

## Placering av element över 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 */
```

Element kan spänna över flera rader/kolumner, vilket möjliggör tidskriftslayouter som är klumpiga med Flexbox.

## Grid vs Flexbox

- **Grid** — 2D-layout (rader *och* kolumner): sidlayouter, kortrutnät, instrumentpaneler.
- **Flexbox** — 1D-layout (en enskild rad eller kolumn): navigeringsfält, knappgrupper, centrering.

De fungerar bra tillsammans — en gridcell kan själv vara en flex-behållare.

## Varför det är viktigt

Grid är det mest kraftfulla CSS-layoutverktyget — det hanterar sidlayouter och responsiva kortrutnät på ett rent sätt och ersätter ofta kapslade div-hack.

Mönstret `auto-fit`/`minmax` responsiv eliminerar i sig behovet av många mediefrågor.