如何在CSS網格中實現等寬列？

CSS 網格中的等寬列

Flexbox 因其在等寬列中顯示項目的能力而獲得認可。然而，CSS Grid 也提供了靈活的佈局選項，這提出瞭如何實現相同效果的問題。

提供的 HTML 結構包括一個 row 元素和多個子 item 元素。目標是將這些項目均勻分佈在行中，無論存在多少項目。

建議 CSS 網格的常見解決方案是使用重複（3, 1fr）。雖然這部分達到了預期的效果，但當內容超過軌道大小時，它可能會失敗。這是因為 1fr 表示可用空間的分佈，並不能保證在所有情況下列寬相等。

為了確保完全相等，應使用以下 CSS 程式碼：

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

minmax(0, 1fr) 將網格軌跡限制為最小尺寸 0 和最大尺寸 1fr。這可以確保即使內容溢出，所有列也將保持相同的寬度。

下面是一個例子來說明重複（3, 1fr）和重複（3, minmax(0, 1fr)）之間的區別：

<code class="html"><div class="container">
  <div class="row" style="grid-template-columns: repeat(3, 1fr)">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item overflow">Very long text that overflows the column</div>
  </div>

  <div class="row" style="grid-template-columns: repeat(3, minmax(0, 1fr))">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item overflow">Very long text that overflows the column</div>
  </div>
</div></code>

使用repeat(3, 1fr )，溢出的項目將脫離其列。相較之下，repeat(3, minmax(0, 1fr)) 確保所有欄位保持相等，溢出內容在下面可見。

以上是如何在CSS網格中實現等寬列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！