CSS 網格佈局：百分比與「fr」單位 – 有什麼區別？

CSS 網格佈局中百分比和fr 單位的區別

使用CSS 配置網格佈局時，用於指定列和行大小的單位選擇可能會影響佈局的行為。兩種常用的單位是百分比和分數單位 (fr)。讓我們在 CSS 網格佈局的上下文中檢查這些單位之間的主要差異。

fr 單位

fr 單位表示考慮網格間隙後網格容器內可用空間的分數單位。本質上，它允許列或行佔用一定比例的剩餘空間。可用空間在具有 fr 值的列或行之間平均分配。

這可確保元素的大小隨著網格容器大小的調整而相應地縮放。由 grid-column-gap 和 grid-row-gap 定義的網格間隙，在計算 fr 值之前從可用空間中減去。

百分比單位

百分比單位，另一方面，將列或行的寬度指定為整個網格容器（包括網格間隙）的百分比。這意味著元素的大小是固定的，並且它們不會根據容器的大小動態調整。

因此，可能會遇到列的總寬度（包括網格間隙）的情況，超過網格容器的寬度。這可能會導致佈局溢出容器。

範例

為了說明行為差異，請考慮下列網格佈局：

在本例中，百分比單位用於定義列寬。結果，列的總寬度，包括網格間隙（11 個間隙，間隙為 10px），超過了網格容器的寬度，導致佈局溢出。

但是，如果我們切換到使用fr 單位改為：

現在，列佔用了可用空間的比例，並且在計算之前從總空間中減去網格間隙fr 值。這會導致響應式佈局根據網格容器的大小動態調整。

結論

為網格佈局選擇適當的單位取決於所需的行為。當您需要固定大小時，百分比單位是合適的，而當您需要根據可用空間縮放的響應式佈局時，fr 單位是有用的。了解這些單元之間的差異及其對佈局的影響對於創建高效且視覺上令人愉悅的 CSS 網格佈局至關重要。

以上是CSS 網格佈局：百分比與「fr」單位 – 有什麼區別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！