## 🧱 Hvad er `fr`-unit?

`fr` står for **fractional unit** = en brøkdel af den tilgængelige plads i en grid-container.

* Når du definerer `grid-template-columns` eller `grid-template-rows`, kan du bruge `fr` til at sige *“dette spor skal fylde en andel af den resterende plads”*.
* **Vigtig detalje:** `fr` regnes kun ud, *efter* faste værdier (px, %) er trukket fra.

---

### Eksempel 1 – Lige store kolonner

grid-template-columns: 1fr 1fr 1fr;

Her har vi 3 kolonner, der hver får **1/3 af den tilgængelige plads**.

ASCII:

+-----+-----+-----+
|  1  |  2  |  3  |
+-----+-----+-----+

---

### Eksempel 2 – Ulig fordeling

grid-template-columns: 2fr 1fr 1fr;

Her får vi 3 kolonner, men **første kolonne er dobbelt så bred som de andre**.

ASCII:

+---------+-----+-----+
|    1    |  2  |  3  |
+---------+-----+-----+

---

### Eksempel 3 – Blandede værdier

grid-template-columns: 200px 1fr 2fr;

* Første kolonne er altid **200px bred**.
* De resterende to kolonner deles om *resten af pladsen* i forholdet **1:2**.

ASCII (hvis viewport er 800px bred):

* 200px går til første kolonne.
* 600px er tilbage → deles i 1fr (200px) + 2fr (400px).

+----200px----+--200px--+------400px------+
|      1      |    2    |        3        |
+-------------+---------+-----------------+

---

### ✅ Fordelen ved `fr`

* Det er fleksibelt → ingen beregning med procent.
* Du kan mikse faste px og fleksible fr.
* Det gør komplekse layouts enklere at beskrive.

---

## 📖 Læs mere

**MDN (Mozilla Developer Network)**:
🔗 [MDN Web Docs – fr unit](https://developer.mozilla.org/en-US/docs/Web/CSS/fr)

---