CSS 網格：百分比與「fr」單位：我應該使用哪一個？

CSS 網格佈局中的百分比與Fr 單位

了解fr 單位

功能： Fr 單位分配可用空間一個容器。

計算： 可用空間（減去網格間隙後）在 fr 列之間平均分配。

了解百分比 (%) 單位

功能： 將列寬定義為容器寬度的百分比寬度。

計算：列寬由總寬度除以列數決定，包括任何網格間隙的寬度。

區別：溢出與溢出. 分佈

百分比： 由於單位長度固定，列可能會溢出到容器寬度之外和網格間隙。

Fr: 欄位只佔用容器內的可用空間，不會延伸到容器之外。網格間隙不會影響可用空間分配。

對網格間隙使用百分比

為了避免百分比寬度溢出，請從整個容器寬度中減去網格間隙的總寬度，然後除以數量columns:

grid-template-columns: repeat(12, calc(8.3333% - 9.1667px))

其中：

• 8.3333%是每列沒有間隙的百分比寬度
• 9.1667px 是11 個網格間隙的總寬度（每個10 像素）

使用適當的百分比值寬度或實現fr 單位，您可以管理列大小並防止CSS 網格佈局中的溢出。

以上是CSS 網格：百分比與「fr」單位：我應該使用哪一個？的詳細內容。更多資訊請關注PHP中文網其他相關文章！