在css中grid-template-columns repeat函数案例
grid-template-columns配合repeat()函数可简洁定义网格列，如repeat(4, 200px)创建四列等宽布局，repeat(3, 1fr)实现三等分弹性布局，支持混合单位与auto-fit加minmax实现响应式自适应，常用于卡片、表单等场景。
在 CSS Grid 布局中，grid-template-columns 用于定义网格容器中列的数量和大小。配合 repeat() 函数可以更简洁地设置重复的列宽，特别适用于创建等宽或有规律的列结构。
基本语法
repeat(重复次数, 列宽)例如：
grid-template-columns: repeat(3, 100px);表示创建 3 列，每列宽度为 100px。
常用案例演示
1. 创建等宽的多列布局
实现一个四列等宽、每列 200px 的网格：
.grid-container {display: grid;
grid-template-columns: repeat(4, 200px);
}
HTML 结构：
内容1
内容2
内容3
内容4
2. 使用 fr 单位均分容器空
间
间让三列平均分配父容器的可用空间：
grid-template-columns: repeat(3, 1fr);每列占据三分之一宽度，响应式更强。
3. 交替模式：结合多种单位
创建 6 列，每列 1fr，适合响应式网格：
grid-template-columns: repeat(6, 1fr);或者混合使用固定与弹性单位：
grid-template-columns: repeat(2, 150px 1fr);等价于：150px 1fr 150px 1fr（共 4 列）
4. 配合 auto-fit 和 minmax 实现自适应网格
根据容器大小自动调整列数，每列最小 150px，最大 1fr：
.grid-container {display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
这是现代响应式布局的常用写法，能自动换行并填充空白区域。
5. 排除首列或特殊列
比如第一列固定为 80px，其余 3 列均分剩余空间：
grid-template-columns: 80px repeat(3, 1fr);总共 4 列，第一列为固定宽度，后三列为弹性。
基本上就这些常见用法。通过 repeat() 能大幅简化代码，提高可读性和维护性，尤其适合构建卡片列表、表单布局、图片墙等场景。
