20250329- grid-template-columns- repeat(auto-fit, minmax(200px, 1fr))

詳細解釋一下這行 CSS：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

---

什麼是 grid-template-columns？

• 它是 CSS Grid 佈局中用來定義「欄的數量與寬度」的屬性。

---

拆解這段語法

1. repeat(auto-fit, ...)

• repeat() 是重複設定欄的意思。
• auto-fit 是自動偵測最多能放幾欄，會盡可能多排欄。

換句話說：

「自動適應欄數，最多能放幾欄就放幾欄。」

---

2. minmax(200px, 1fr)

• minmax(min, max) 是給欄寬設定最小寬度和最大寬度的限制。
• 這裡設定最小欄寬是 200px，最大寬度是 1fr。

---

3. 1fr 是什麼？

• fr 是「fraction」的縮寫，意指可用空間的分數。
• 1fr 表示這個欄位會佔用可用空間的一份，會自動撐開填滿。

---

總結：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

意思是：

• 自動適應欄數（auto-fit），
• 每個欄寬最少 200px，最多會撐滿整個容器（最大是剩餘空間的 1 份），
• 因此在大螢幕會有多欄並列，
• 在小螢幕寬度不夠時會自動變成單欄或少欄，達成響應式效果。

---

這種寫法的好處：

• 簡單實現自動換行且欄寬可控
• 不用寫媒體查詢就能有彈性排版

---