CSS 網格佈局中列寬的「fr」和百分比單位之間的主要區別是什麼？

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

使用CSS 網格佈局時，了解百分比和fr 單位在定義寬度時的區別非常重要列。

fr單位

fr 單位代表“小數單位”，它僅適用於容器中的可用空間。使用 fr 單位時，瀏覽器在考慮網格間隙後，根據剩餘空間計算每列的寬度。

例如，在下面的程式碼中，網格容器被分成12 列，每列在容器內佔用相等的可用空間：

grid-template-columns: repeat(12, 1fr);

百分比另一方面，單位

百分比單位將每列的寬度定義為容器總寬度的百分比。這意味著每列的寬度是根據容器的實際寬度計算的。

例如，在下面的程式碼中，每列的寬度為8.33333%，即100% 除以12：

grid-template-columns: repeat(12, calc(100% / 12));

為什麼百分比會導致列溢位

fr 和百分比單位之間的主要區別在於它們如何處理網格間隙。對於 fr 單位，在計算列寬之前，會從容器的可用空間中減去網格間隙。這可確保列不會溢出容器的寬度。

但是，使用百分比單位時，網格間隙會加到列寬度中。這意味著即使列的總寬度可能等於 100%，網格間隙的新增也會導致列溢出容器的寬度。

要解決此問題，您可以使用 fr 單位或調整百分比計算以考慮網格間隙。

以上是CSS 網格佈局中列寬的「fr」和百分比單位之間的主要區別是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！