grid-template-columns 定义网格列结构，支持固定值、百分比、fr 单位、auto、min-content、max-content 及 repeat() 函数；fr 按比例分配剩余空间，repeat() 简化重复列，结合 minmax() 实现响应式布局，如 repeat(auto-fit, minmax(150px, 1fr)) 自动调整列数与宽度。
CSS 的 grid-template-columns 属性用于定义网格容器中列的数量、大小和轨道宽度。它是 CSS Grid 布局中最核心的属性之一，直接决定网格的列结构。
基本语法与取值
grid-template-columns 接受一个用空格分隔的值列表，每个值对应一列的宽度。
常见取值包括：固定长度：如
100px
、
2em
、
5rem
百分比：如
50%
、
25%
，相对于网格容器的宽度 fr 单位：表示“分数（fraction）”，按剩余空间的比例分配 auto：根据内容自动调整列宽 min-content / max-content：基于内容最小或最大所需空间 repeat() 函数：简化重复列的写法
示例：
.container { display: grid; grid-template-columns: 100px 200px 1fr;}
这行代码创建了三列：第一列 100px 宽，第二列 200px 宽，第三列占据剩余空间。
立即学习“前端免费学习笔记（深入）”；
使用 fr 单位灵活布局
fr 是 Grid 中非常实用的单位，用于按比例分配可用空间。
.container { grid-template-columns: 1fr 2fr;}
容器被分为三等份，第一列占 1 份，第二列占 2 份，实现 1:2 的宽度比例。
混合使用时，固定值先被扣除，剩余空间再按 fr 分配。
grid-template-columns: 100px 1fr 2fr;
100px 被固定占用后，其余空间按 1:2 分给后两列。
repeat() 函数简化写法
当有多列相同宽度时，repeat() 可避免重复书写。
.container { grid-template-columns: repeat(3, 1fr);}
等同于
1fr 1fr 1fr
，创建三个等宽列。
九歌
九歌–人工智能诗歌写作系统
322 查看详情
支持嵌套和混合：
grid-template-columns: repeat(2, 100px 1fr) auto;
生成：100px、1fr、100px、1fr、auto 共五列。
还可以使用 auto-fill 和 auto-fit 实现响应式布局：
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
容器会尽可能多地填充最小 200px 的列，每列至少 200px，多余空间平均分配。
结合 minmax() 设置弹性列宽
minmax() 函数允许为列设置最小和最大宽度范围。
.container { grid-template-columns: minmax(100px, 200px) 1fr;}
第一列最小 100px，最大 200px，超出部分由第二列（1fr）吸收。
常用于响应式设计，配合 repeat() 使用更强大：
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
自动适配列数，每列最小 150px，最大为 1fr，屏幕变窄时自动换行。
基本上就这些。掌握 grid-template-columns 的各种写法，能快速构建灵活、响应式的网格布局。关键是理解 fr、repeat、minmax 的组合逻辑，实际开发中非常高效。不复杂但容易忽略细节。
以上就是css grid-template-columns属性用法解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1067308.html
微信扫一扫 
支付宝扫一扫 
