大陆信使1. grid-template-columns基础解析
当我们在CSS Grid布局中看到grid-template-columns: repeat(1, 1fr)这样的声明时，实际上是在定义一个最简单的单列网格布局。让我们拆解这个看似简单但内涵丰富的CSS声明。
1.1 语法结构分解
这个CSS规则由三个关键部分组成：
grid-template-columns：网格容器的列定义属性repeat()：CSS Grid的重复计数函数1fr：CSS Grid特有的弹性单位
在具体实现中，这个声明等价于直接写grid-template-columns: 1fr，但使用repeat()函数的形式为后续扩展提供了更好的可维护性。现代浏览器对这两种写法都能完美支持，实测在Chrome 120+、Firefox 115+和Safari 16.4+上表现一致。
1.2 fr单位深度解读
1fr这个单位是CSS Grid布局的核心创新之一：
fr代表"fraction"（分数）- 表示可用空间的比例分配
- 与传统的百分比单位不同，fr单位计算的是剩余空间
当容器内有明确尺寸时，1fr的表现与100%类似。但在响应式布局中，fr单位会自动计算容器剩余空间，比百分比单位更加灵活可靠。实测在包含padding和margin的场景下，fr单位能更准确地保持布局比例。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. repeat()函数技术细节
2.1 函数参数解析
repeat(1, 1fr)中的两个参数：
- 重复次数：这里设置为1次
- 重复模式：这里设置为1fr
这个函数在网格布局中特别有用，当我们需要创建规律性重复的列或行时，可以大幅简化代码。例如要创建5个等宽列，可以写repeat(5, 1fr)而不是1fr 1fr 1fr 1fr 1fr。
2.2 浏览器渲染机制
现代浏览器处理repeat()函数时：
- 先解析repeat函数的参数
- 展开为等效的普通值列表
- 应用常规的网格布局计算
在性能方面，repeat()函数与直接写展开形式几乎没有差异。但在开发体验和维护性上，repeat()明显更优，特别是在需要创建大量重复轨道时。