使用 repeat() 和 minmax() 可高效创建响应式 Grid 布局：repeat(3, 1fr) 简化重复轨道定义，minmax(200px, 1fr) 设定尺寸范围，结合 auto-fit 实现自动填充与弹性伸缩。
在使用 css Grid 布局时，repeat() 和 minmax() 是两个非常实用的函数，它们能帮助我们更灵活地定义网格的行和列。结合使用这两个特性，可以快速构建响应式且自适应的布局结构。
repeat() 函数：简化重复轨道定义
当需要创建多个宽度或高度相同的列或行时，手动书写每个尺寸会显得冗长。repeat() 可以简化这一过程。
语法格式为：repeat(数量, 轨道尺寸)
例如：
-
grid-template-columns: repeat(3, 1fr);表示创建 3 列，每列均分剩余空间。 -
grid-template-rows: repeat(2, 100px);创建 2 行，每行高 100px。
repeat() 还支持重复多种尺寸：repeat(2, 100px 50px) 等同于 100px 50px 100px 50px。
立即学习“前端免费学习笔记（深入）”；
minmax() 函数：设定尺寸范围
minmax(min, max) 允许为网格轨道指定一个尺寸范围 —— 最小值和最大值。这在响应式设计中特别有用，确保内容既不会太小也不会溢出。
常见用法：
-
minmax(100px, 1fr)：最小 100px，最大可伸展至 1fr 的可用空间。 -
minmax(auto, 300px)：内容自适应最小尺寸，最大不超过 300px。
当容器空间不足时，轨道不会小于最小值；空间充足时，可扩展至最大值。
结合 repeat 与 minmax 实现弹性布局
将两者组合使用，能构建出智能适应内容和屏幕尺寸的网格。
示例：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
这行代码含义是：自动填充尽可能多的列，每列最小 200px，最大为 1fr（等分剩余空间）。当容器变窄时，列会自动换行并重新分布。
使用 auto-fit 时，空轨道会被拉伸填满；若用 auto-fill，则保留未填充的空白轨道。
基本上就这些。掌握 repeat 和 minmax 的搭配，能让 Grid 布局更简洁、更具适应性，尤其适合卡片列表、图库、响应式表单等场景。不复杂但容易忽略细节，比如 auto-fit 与 auto-fill 的差异，值得多实践体会。