无论内容大小如何，如何使用 CSS 网格创建等宽列？

使用 CSS 网格创建等宽列

您希望在相同数量的列中显示行元素中的子元素，无论孩子的数量。虽然 Flexbox 可以轻松实现这一点，但 CSS Grid 提出了不同的挑战。本文提供了使用 CSS 网格实现此目的的解决方案。

解决方案

第一个常见尝试是使用 Repeat(3, 1fr) 作为网格的值-template-columns 属性。但是，1fr 根据可用空间计算空间分布。当内容超过轨道大小时，此限制会出现问题，防止列溢出并相应地调整其宽度。内容被截断的部分列可能会变得不相等。

为了确保列宽完全相等，您应该使用以下规则：

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

minmax(0, 1fr) 指定网格轨道可以最小尺寸为 0，任意最大尺寸为 1fr。这可确保列始终具有相同的宽度并容纳超出轨道大小的内容。

请记住，启用内容溢出可能会导致不同的视觉结果，具体取决于浏览器的默认行为、内容大小或可用空间。问题中提供的示例说明了两种方法之间的区别：repeat(3, 1fr) 与 Repeat(3, minmax(0, 1fr))。

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