如何在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中文网其他相关文章！