如何在 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):

minmaxEqualColumns 带有重复(3, minmax(0, 1fr)):

以上是如何在 CSS 网格中实现精确相等的列宽？的详细内容。更多信息请关注PHP中文网其他相关文章！