無論內容大小如何，如何使用 CSS 網格建立等寬列？

使用CSS 網格建立等寬列

您希望在相同數量的列中顯示行元素中的子元素，無論孩子的數量。雖然 Flexbox 可以輕鬆實現這一點，但 CSS Grid 提出了不同的挑戰。本文提供了使用 CSS 網格實現此目的的解決方案。

解

第一個常見嘗試是使用 Repeat(3, 1fr) 作為網格的值-template-columns 屬性。但是，1fr 根據可用空間計算空間分佈。當內容超過軌道大小時，此限制會出現問題，防止列溢出並相應地調整其寬度。內容被截斷的部分欄位可能會變得不相等。

為了確保列寬完全相等，您應該使用以下規則：

<code class="css">grid-template-columns: repeat(3, minmax(0, 1fr));</code>

minmax(0, 1fr) 指定網格軌道可以最小尺寸為 0，任意最大尺寸為 1fr。這可確保列始終具有相同的寬度並容納超出軌道大小的內容。

請記住，啟用內容溢位可能會導致不同的視覺結果，具體取決於瀏覽器的預設行為、內容大小或可用空間。問題中提供的範例說明了兩種方法之間的差異：repeat(3, 1fr) 與 Repeat(3, minmax(0, 1fr))。

以上是無論內容大小如何，如何使用 CSS 網格建立等寬列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！