无论内容大小如何，如何在 CSS 网格中实现等宽列？

在 CSS 网格中实现等宽列

使用 CSS 网格时，在列之间均匀分布元素可能具有挑战性。虽然 Flexbox 提供了一种简单的方法，但使用 CSS Grid 实现相同的结果需要更多考虑。

原始问题：

“我想在等宽列中的行，无论行中的子级数量如何我尝试使用 CSS 网格，但我无法使其工作。”

答案：

通常建议的重复（3, 1fr）解决方案并不完全准确。正如响应中所述：

“1fr 是关于可用（！）空间的分配。一旦内容变得大于轨道大小，就会中断。”

确保列保留由于它们的宽度相等，建议使用 minmax(0, 1fr) 代替：

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

minmax(0, 1fr) 允许网格轨道小至 0 和大至 1fr。这可确保列保持相等的宽度。但是，如果超出列的宽度，此方法可能会导致内容溢出。

要直观地演示这些方法之间的差异，请考虑以下示例：

<code class="html"><div class="row">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div></code>

使用重复（3 , 1fr)，列将根据可用空间调整其宽度，可能会导致不同的宽度。但是，使用 Repeat(3, minmax(0, 1fr)) 将确保所有三列具有完全相同的宽度，无论内容大小如何。

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