repeat()函数可简化重复轨道定义，支持与auto-fill/auto-fit结合实现响应式布局，适用于产品列表、图片画廊等场景；通过minmax()定义最小宽度和弹性分配，auto-fill保留空轨道，auto-fit折叠空轨道以优化空间利用；repeat()还可嵌套或混合使用，如repeat(3, 1fr 2fr)创建规律性多尺寸轨道，或grid-template-columns: 100px repeat(3, 1fr) 200px;在首尾添加固定列，灵活构建复杂且自适应的网格结构。
CSS Grid布局中的
repeat()
函数是一个非常实用的工具，它能极大地简化那些重复出现的网格轨道（无论是行还是列）的定义，让我们的CSS代码更简洁、更易读，同时显著提升开发效率。它避免了手动重复书写相同尺寸或模式的轨道，尤其在面对复杂或动态网格时，其优势更加明显，是构建现代响应式布局不可或缺的一部分。
使用
repeat()
函数来定义网格轨道，核心在于指定重复的次数和重复的轨道模式。它的基本语法是
repeat(次数, 轨道定义)
。例如，如果你需要创建六个等宽的列，每列占据1份可用空间，你可以写成
grid-template-columns: repeat(6, 1fr);
。这比手动重复书写
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
要清晰得多，也减少了出错的可能性。
repeat()
的强大之处还在于它可以与
auto-fill
或
auto-fit
关键字结合使用，实现高度响应式的网格布局。比如，
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
这行代码会根据容器的宽度自动填充尽可能多的200px宽度的列，并且如果有多余空间，这些列会均匀分配剩余空间。
auto-fill
会在一行中创建所有可能的轨道，即使它们是空的，而
auto-fit
则会折叠空轨道，让非空轨道占据所有可用空间。在我个人看来，
auto-fit
在大多数实际应用中会更常用，因为它能更好地利用空间，避免不必要的空白，让布局看起来更紧凑。
更进一步，
repeat()
可以嵌套在其他轨道定义中，这赋予了它极大的灵活性。比如，
grid-template-columns: 100px repeat(3, 1fr) 200px;
这会创建一个100px宽的列，接着是三个等宽的列，最后是一个200px宽的列。这种组合方式使得我们能够构建非常复杂的网格结构，而代码依然保持相对的简洁和易读性。我个人在处理一些模块化的布局时，特别喜欢这种混合方式，它能让我一眼看出布局的骨架和关键区域的尺寸。
CSS Grid中repeat()
函数与auto-fill
/auto-fit
的结合应用场景有哪些？
repeat()
与
auto-fill
或
auto-fit
的结合，是实现高度自适应、响应式网格布局的关键。想象一下，你有一个产品列表或者图片画廊，希望它们能根据屏幕大小自动调整每行的显示数量。这时，
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
就派上用场了。
这里的
minmax(200px, 1fr)
定义了每个轨道最小200px，最大1fr（即平均分配剩余空间）。
auto-fill
会尽力填充行，即使没有足够的子元素来填满所有生成的轨道，也会保留这些空轨道。这在某些特定设计下有用，比如你希望即使内容不足，网格结构也保持完整，或者在后续动态加载内容时避免布局跳动。
而
auto-fit
则更“智能”一些，它会折叠那些没有内容的空轨道，让实际有内容的轨道占据所有可用空间。这意味着如果只有少量项目，它们会均匀地分散开，而不是挤在一边留下大量空白。我个人在构建大部分响应式卡片布局时，更倾向于使用
auto-fit
，因为它能更好地优化空间利用率，让页面看起来更紧凑、更美观。比如，一个博客文章列表，你肯定希望文章卡片能填满一行，而不是左边一堆卡片，右边一大片空白。这就是
auto-fit
的魔力。这种组合方式，大大减少了媒体查询（media queries）的使用，让我们的CSS更简洁，维护成本也更低。它特别适合那些内容数量不确定，但又需要保持良好视觉平衡的布局，比如电商产品展示、新闻列表或个人作品集。
在CSS Grid布局中，repeat()
函数如何处理不规则或混合尺寸的轨道定义？
repeat()
函数虽然以简化重复模式为主要目的，但它并非只能处理完全相同的轨道。实际上，它能非常灵活地处理不规则或混合尺寸的轨道定义，这体现在两个主要方面：
其一，
repeat()
可以接受一个轨道列表作为其第二个参数。这意味着你可以重复一个模式，而这个模式本身就包含不同尺寸的轨道。例如，
grid-template-columns: repeat(3, 1fr 2fr);
这会生成三组“1fr宽的列跟着一个2fr宽的列”的模式，最终效果是
1fr 2fr 1fr 2fr 1fr 2fr
。这种方式对于那些有规律但又非单一尺寸的布局模式非常有效。比如，你可能有一个主内容区和侧边栏交替出现的布局，或者一个包含大小不同模块的仪表盘布局，就可以用这种方式来定义。
其二，
repeat()
可以与非重复的轨道定义混合使用。我在前面也提到了，像
grid-template-columns: 100px repeat(3, 1fr) 200px;
这样的写法，它允许你在网格的特定位置插入固定尺寸或其他自定义尺寸的轨道，而在其他部分使用
repeat()
来简化定义。这种混合使用的方式，赋予了我们极大的自由度去构建那些看起来复杂，但实际上底层有一定规律可循的网格布局。它允许我们精确控制某些
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
