CSS3 — Flexbox, Grid, responsive design, mediaqueries

Kommunikation og IT A · HTX · A-niveau · Frontend og UX

💻 CSS3 Layout

Flexbox — en-dimensionel layout (én retning ad gangen):

```css

.container {

display: flex;

justify-content: space-between; / vandret /

align-items: center; / lodret /

flex-wrap: wrap; / brug for responsive /

}

.element {

flex: 1; / fordel pladsen ligeligt /

}

```

CSS Grid — to-dimensionel layout:

```css

.grid {

display: grid;

grid-template-columns: repeat(3, 1fr); / 3 lige brede kolonner /

grid-template-rows: auto; / rækker tilpasser sig /

gap: 16px;

}

.header { grid-column: 1 / -1; } / strækker hele bredden /

```

Responsive design med mediaqueries:

```css

/ Mobile first /

.kort { width: 100%; }

@media (min-width: 768px) { / tablet /

.kort { width: 50%; }

}

@media (min-width: 1200px) { / desktop /

.kort { width: 33%; }

}

```

Flexbox vs. Grid: Flexbox = navigation, kortliste i én retning. Grid = komplekst sidelayout.

Læringsmål

• Bygge responsive layouts med Flexbox og CSS Grid
• Implementere breakpoints med mediaqueries (mobile first)
• Vælge Flexbox vs. Grid til korrekt kontekst
• Bruge CSS Custom Properties (variabler) til vedligeholdelse

Sådan kan du arbejde med emnet

• Lav et layout med tre kolonner ved hjælp af Flexbox
• Brug en mediaquery til at ændre layoutet fra tre kolonner til én kolonne på mobil
• Forklar forskellen på Flexbox og Grid, og hvornår man vælger det ene frem for det andet

Træningsforslag

• Byg en responsiv kortliste der går fra 1 → 2 → 3 kolonner
• Tag Flexbox Froggy (flexboxfroggy.com) og CSS Grid Garden
• Klon en populær webside's layout med kun HTML+CSS