新手指南：掌握 CSS Grid 中的 fr 單位

By徐培鈞
LinkedIn

更新日期： 2024 年 9 月 14 日

在網頁設計中，CSS Grid 是一種強大且靈活的布局系統，它讓你能夠輕鬆地創建複雜的網格布局。

在這個系統中，fr 是一個非常重要的單位，用來表示「可分配空間的比例」。

這篇文章將介紹什麼是 fr 單位，並教你如何在實際項目中使用它。

什麼是 fr 單位？

fr 是 CSS Grid 專有的單位，全稱是「fraction」，即「比例單位」。

當你在定義網格布局時，fr 用來表示剩餘空間應該如何在網格軌道（列或行）之間分配。

當使用 CSS Grid 來設置網格布局時，fr 單位可以讓你指定每一列或每一行應該佔據的空間比例。

例子：使用 fr 單位來創建等寬列

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; /* 每列之間的間距 */
}

.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}
<div class="container">
  <div class="item">列 1</div>
  <div class="item">列 2</div>
  <div class="item">列 3</div>
</div>

這段代碼會創建一個具有三列的網格布局，每一列都佔據可用空間的 1/3。

這意味著即使你改變容器的寬度，這三列的寬度也會根據 fr 的比例自動調整。

fr 與其他單位的比較

fr 單位與其他單位（如 px、%、auto）相比，有它獨特的優勢，尤其是在動態布局中：

  • px（像素）：像素是一種固定單位，無論容器大小如何改變，列的寬度都保持不變。適用於需要精確控制寬度的情況。
  • %（百分比）：百分比是基於父容器的大小進行縮放的單位，適用於響應式設計。但在複雜布局中，使用百分比有時難以控制剩餘空間的分配。

相較之下，fr 允許你根據剩餘空間靈活地分配列或行的比例，特別適合創建自適應的響應式布局。

例子：fr 與固定單位的結合

你也可以將 fr 單位與其他單位結合使用，例如讓某一列的寬度固定，其他列按比例分配：

.container {
  display: grid;
  grid-template-columns: 200px 2fr 1fr; /* 第一列固定 200px，剩餘空間按 2:1 分配 */
  gap: 10px;
}

.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}
<div class="container">
  <div class="item">固定寬度列</div>
  <div class="item">寬度 2fr 的列</div>
  <div class="item">寬度 1fr 的列</div>
</div>

在這個例子中，第一列的寬度固定為 200px，而其他兩列則根據剩餘空間按 2:1 的比例分配。

結語

fr 單位是 CSS Grid 中強大且靈活的工具，讓你能夠輕鬆地分配網格布局中的空間比例。

它特別適合在響應式設計中使用，因為它能根據容器大小動態調整網格的分配方式。

通過結合其他單位，你可以創建複雜而靈活的網頁布局。

希望這篇文章能幫助你理解 fr 單位的概念，並在你的網頁設計中靈活運用它，讓你的布局更加出色！

Similar Posts