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

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

<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>

.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:**

.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:**

.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:**

.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:**

.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:**

.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*.

---