grid-template-columns最常用写法是空格分隔轨道尺寸列表：如1fr 1fr 1fr（等宽三列）、200px 1fr 2fr（固定+弹性比例）、repeat(4, 1fr)（四等宽）、minmax(200px, 1fr) 1fr（最小宽度+弹性），配合auto-fit/auto-fill实现响应式布局。
直接用 grid-template-columns 就能定义列数和宽度，不需要额外容器或浮动 hack。
怎么写 grid-template-columns 最常用
它接收一个空格分隔的轨道尺寸列表，每项对应一列：
-
grid-template-columns: 1fr 1fr 1fr→ 等宽三列（弹性分配剩余空间） -
grid-template-columns: 200px 1fr 2fr→ 第一列固定 200px，后两列按 1:2 比例分剩余空间 -
grid-template-columns: repeat(4, 1fr)→ 四等宽列（repeat()更简洁） -
grid-template-columns: minmax(200px, 1fr) 1fr→ 第一列最小 200px、最大不超 1fr，第二列占满剩余
fr 单位不是像素，别当成“固定比例”硬套
fr 是“可用空间的份数”，不是绝对比例。如果某列有内容撑开（比如图片、长文本），且没设 min-width 或 overflow，它可能突破 fr 分配逻辑：
- 默认情况下，Grid 会优先满足内容最小宽度，再分配剩余空间
- 想强制按
fr切分？加min-width: 0或overflow: hidden到子项上 -
fr不支持小数运算，0.5fr合法，但calc(1fr - 20px)只能在minmax()或单独值里用
响应式多列别只靠媒体查询重写整个 grid-template-columns
用 repeat(auto-fit, minmax(...)) 能自动适配容器宽度：
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))))→ 容器够宽就多列，窄了自动换行，且每列不小于 250px -
auto-fit会合并空轨道；auto-fill则保留空轨道（适合需要占位的场景） - 注意：IE 不支持
auto-fit/auto-fill，如需兼容得降级为媒体查询
真正难的不是写几列，而是处理内容溢出、跨列对齐、以及和 grid-auto-rows 配合时的隐式行高问题——这些往往在数据动态渲染后才暴露。
