grid-template-columns用于定义网格列的大小和分布，支持固定值、百分比、fr弹性单位、auto及minmax()等；通过fr可实现响应式布局，repeat()简化重复列定义，minmax()设定列宽范围，组合使用可高效构建复杂网格布局。
在css grid布局中，grid-template-columns 是一个核心属性，用于定义网格容器中列的数量、大小和分布方式。它让你能够灵活地划分网格的横向结构，是构建复杂页面布局的基础。
基本语法与常用值
grid-template-columns 接受一系列用空格分隔的值，每个值对应一列的宽度。常见取值包括：
- Length：如 100px、2em，表示固定列宽
- percentage：如 50%，相对于网格容器的宽度
- fr：弹性单位，表示可用空间的份数，比如 1fr 表示均分剩余空间
- auto：自动根据内容或剩余空间分配宽度
- min-content、max-content、fit-content()：基于内容调整列宽
示例：
.container { display: grid; grid-template-columns: 100px 200px 1fr; }
这表示三列：第一列100px，第二列200px，第三列占据剩余空间。
立即学习“前端免费学习笔记（深入）”；
使用 fr 单位实现响应式布局
fr 单位是Grid中最强大的特性之一，能轻松创建等宽或按比例分布的列。
- grid-template-columns: 1fr 1fr —— 两列均分容器宽度
- grid-template-columns: 2fr 1fr —— 第一列占2份，第二列占1份
- grid-template-columns: 1fr 2fr 1fr —— 三列中中间列更宽
这种写法无需计算百分比，自动适应容器变化，适合响应式设计。
结合 repeat() 函数简化重复定义
当需要定义多个相同或有规律的列时，repeat() 函数非常实用。
- repeat(3, 1fr) —— 创建3个等宽列
- repeat(4, 100px) —— 4个100px宽的列
- repeat(2, 1fr 2fr) —— 重复模式：1fr 2fr 1fr 2fr
还可以结合其他值使用：
.container { grid-template-columns: 100px repeat(3, 1fr) 100px; }
表示左右各一个100px列，中间三个等宽列。
使用 minmax() 控制列宽范围
有时希望列宽在一定范围内弹性变化，这时可用 minmax() 函数。
- minmax(100px, 1fr) —— 列宽最小100px，最大为1fr
- minmax(max-content, 200px) —— 最小为内容所需宽度，最大200px
常用于防止列过窄或过宽：
.container { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
这会自动创建尽可能多的列，每列至少200px，多余空间均分。
基本上就这些。掌握 grid-template-columns 的各种写法，就能高效构建从简单到复杂的网格布局，关键是理解 fr、repeat() 和 minmax() 的组合使用方式。不复杂但容易忽略细节。
暂无评论