如何在 CSS 網格中實現精確相等的列寬？

CSS 網格中的精確相等的列寬

在 CSS 網格中創建相等大小的列可能看起來很簡單，但它需要特定的方法。雖然 Flexbox 透過其 flex-basis 屬性提供了一個簡單的解決方案，但 CSS Grid 需要更精確的配置。

挑戰：

給定如下HTML 結構：

<code class="html"><div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div></code>

目標是在相等的列中顯示這些元素，無論行內的子元素有多少。

解：

常見的Repeat(3, 1fr) 的方法是不夠的，因為 1fr 分配可用空間而不是強制執行嚴格的列相等。如果內容超出軌道大小，它不會自動調整，可能會導致列寬不均勻。

要實現完全相等的列寬，請使用下列CSS 屬性：

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

解釋：

minmax(0, 1fr) 允許網格軌道小至0，大至1fr。這確保了列保持相等。但是，請小心，因為如果內容大於列或無法換行，可能會導致溢位。

請考慮以下例子來說明差異：

<code class="css">.equalColumns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.minmaxEqualColumns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}</code>

equalColumns帶有重複(3, 1fr):

minmaxEqualumns 帶有重複(3, minmax(0, 1fr)):

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