---
# System prepended metadata

title: Øvelser CSS Grid og `fr`-unit
tags: [WU, GF2, CSS]

---

# 📝 Øvelsesark – CSS Grid og `fr`-unit

## Starter-HTML (samme for alle øvelser)

```html
<section class="content">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</section>
```

```css
.box {
  background: lightblue;
  border: 1px solid #333;
  padding: 1rem;
  text-align: center;
}
```

---

### 🌱 Øvelse 1 – Brug af `px`

**Opgave:** Lav 3 kolonner, der er **200px, 200px og 200px** brede.

**CSS:**

```css
.content {
  display: ;
  grid-template-columns: ;
  gap: rem;
}
```

**ASCII - eksempel:**

```
+----200px----+----200px----+----200px----+
|    Box 1    |    Box 2    |    Box 3    |
+-------------+-------------+-------------+
```

---

### 🌱 Øvelse 2 – Brug af `%`

**Opgave:** Lav 3 kolonner, der er **33% hver**.

**CSS:**

```css
.content {
  display: ;
  grid-template-columns: ;
  gap: ;
}
```

**ASCII - eksempel:**

```
+-------33%------+-------33%------+-------33%------+
|     Box 1      |     Box 2      |     Box 3      |
+----------------+----------------+----------------+
```

⚠️ Problemet: 33% + 33% + 33% = 99%. Det kan give skæve layouts.

---

### 🌱 Øvelse 3 – Brug af `fr` (lige fordeling)

**Opgave:** Lav 3 kolonner, der er **lige brede** med `fr`.

**CSS:**

```css
.content {
  display: ;
  grid-template-columns: ;
  gap: ;
}
```

**ASCII:**

```
+-------1fr------+-------1fr------+-------1fr------+
|     Box 1      |     Box 2      |     Box 3      |
+----------------+----------------+----------------+
```

---

### 🌱 Øvelse 4 – Ulig fordeling med `fr`

**Opgave:** Første kolonne dobbelt så bred som de andre.

**CSS:**

```css
.content {
  display: ;
  grid-template-columns: ;
  gap: ;
}
```

**ASCII - eksempel:**

```
+-------------2fr--------------+------1fr------+------1fr------+
|            Box 1             |     Box 2     |     Box 3     |
+------------------------------+---------------+---------------+
```

---

### 🌱 Øvelse 5 – Mix af `px` og `fr`

**Opgave:** Første kolonne **200px**, de to andre deler resten **1fr : 2fr**.

**CSS:**

```css
.content {
  display: ;
  grid-template-columns: ;
  gap: ;
}
```

**ASCII (hvis viewport = 800px):**

```
+----200px----+---200px (1fr)---+---400px (2fr)---+
|    Box 1    |      Box 2      |      Box 3      |
+-------------+-----------------+-----------------+
```

---

## 🌟 Konklusion

* `px` = faste værdier (aldrig fleksibel).
* `%` = relativ til hele containerens bredde (kan give afrundingsfejl).
* `fr` = fleksibel brøkdel af *tilbageværende plads*.

---