等大小的 CSS 网格列
许多程序员在 CSS 网格布局中实现等宽列时面临挑战。虽然 Flexbox 简化了此任务,但也可以使用 CSS Grid 来完成。
最常见的方法是使用 Repeat() 函数,如 grid-template-columns 中所示:repeat(3, 1fr); 。然而,如果内容超过轨道大小,这种速记可能会出现问题,因为它只分配可用空间。要确保宽度相等,无论内容大小如何,请使用以下语法:
grid-template-columns: repeat(3, minmax(0, 1fr));
minmax() 属性允许轨道小至 0 、大至 1fr,从而确保列大小相等。但请注意,如果内容太大或无法换行,这可能会导致溢出。
以下示例说明了差异:
以上是无论内容如何,如何创建相同大小的 CSS 网格列?的详细内容。更多信息请关注PHP中文网其他相关文章!