在css中grid-template-columns repeat函数案例 css relative absolute

grid-template-columns配合repeat()函数可简洁定义网格列，如repeat(4， 200px)创建四列等宽布局，repeat(3， 1fr)实现三等分弹性布局，加支持混合单位与auto-fitminmax实现响应式，常用于布局、表单等场景。

在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 结构：lt；div class="grid-container"gt；  lt；divgt；内容1lt；/divgt；  lt；divgt；内容2lt；/divgt；  lt；divgt；内容3lt；/divgt；  lt；divgt；内容4lt；/divgt；lt；/divgt；2. 使用fr单位均分容器空间

让三列平均分配父容器的可用空间：grid-template-columns：repeat(3， 1fr)；

每列请求顶部宽度，响应式更强。

3. 轮换模式：结合多个单位

创建 6 列，每列 1fr，适合响应方式即：怪物 AI 数字人

数字人短视频创作，数字人直播，实时驱动数字人 44 查看详情 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重复函数案例的详细内容，更多请关注乐哥常识网其他文章！ 相关标签：css html ai响应式布局弹性布局css html自动类显示大家都看：css伪类：checked与label配合使用如何用css实现提示弹出动画怎么用HTML插入列表并自定义格式_HTML列表标签与CSS样式定制如何用css制作圆角和更换组合按钮如何使用css选择器优化列表项样式