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 结构：
2. 使用 fr 单位均分容器空间
让三列平均分配父容器的可用空间：
grid-template-columns: repeat(3, 1fr);
每列占据三分之一宽度，响应式更强。
3. 交替模式：结合多种单位
创建 6 列，每列 1fr，适合响应式网格：
TextCortex
AI写作能手，在几秒钟内创建内容。
62 查看详情 
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() 能大幅简化代码，提高可读性和维护性，尤其适合构建卡片列表、表单布局、图片墙等场景。
以上就是在css中grid-template-columns repeat函数案例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1005851.html
微信扫一扫 
支付宝扫一扫 
