CSS多列布局，repeat函数详解

CSS 的 `repeat()` 函数是简化多列布局的强大工具，它能用一行代码替代冗长重复的轨道定义——无论是固定数量的等宽列（如 `repeat(4, 1fr)`），还是混合固定尺寸与弹性列的复杂结构（如 `200px repeat(3, 1fr) 80px`），亦或是借助 `auto-fit` 或 `auto-fill` 实现智能响应式列数调整；同时需注意其语法限制：仅支持正整数、`auto-fit` 或 `auto-fill`，不接受负数、小数或嵌套调用，搭配 `minmax()` 时也需确保括号层级正确——掌握这些要点，就能写出更简洁、灵活且易于维护的 CSS 网格布局。

用 repeat() 函数写多列布局，比手动写一堆 1fr 简洁得多，也更易维护。

用 repeat() 替代重复的 track 定义

以前写 4 列等宽布局要这样写：

现在只需一行：

想改成 6 列？改个数字就行，不用增删字段。

组合使用 repeat() 和固定尺寸

实际布局常混用固定列和弹性列，比如侧边栏 + 主内容区：

这表示：200px 宽的左栏 → 3 个等宽主列 → 80px 宽的右栏。repeat() 可嵌在任意位置，不局限于开头或结尾。

用 auto-fit / auto-fill 动态适配列数

响应式场景下，让列数随容器宽度自动调整：

• grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) );
• grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) );

区别在于：auto-fit 会收缩空列（把剩余空间分给现有列），auto-fill 保留所有可能列（空列仍占位）。多数情况推荐 auto-fit。

避免常见误区

• repeat() 只接受正整数、auto-fit 或 auto-fill，不能写 repeat(-2, 1fr) 或 repeat(1.5, 1fr)
• 嵌套 repeat 不被支持，比如 repeat(2, repeat(3, 1fr)) 是无效语法
• 和 minmax() 搭配时，注意括号层级：正确是 repeat(3, minmax(100px, 1fr))，不是 minmax(repeat(3, 100px), 1fr)

今天关于《CSS多列布局，repeat函数详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！