定义grid行列轨道需在容器上设置grid-template-columns和grid-template-rows，配合display: grid生效；仅支持容器级声明，子项设置无效；值为用空格分隔的尺寸序列，支持px、fr、auto、minmax等单位；动态列数推荐repeat(auto-fit, minmax(min, max))；超出显式轨道时由grid-auto-rows/columns控制隐式轨道。
定义 Grid 的行列轨道，核心是用 grid-template-columns 和 grid-template-rows 这两个属性，写在设置了 display: grid 的容器上。它们不是设置“多少个单元格”，而是描述“有哪些轨道、每条轨道多宽或多高”。
必须写在容器上，子项无效
这两个属性只对网格容器生效，子元素（grid item）加了也没用。漏掉 display: grid 或写错位置（比如写在 item 上），整个声明会被浏览器忽略，布局退化为普通文档流。
- 正确写法：.container { display: grid; grid-template-columns: 200px 1fr; }
- 错误写法：.item { grid-template-columns: 200px 1fr; } —— 完全不生效
- 如果只写了 grid-template-columns 没写 grid-template-rows，所有子项会默认挤在第一行
轨道尺寸怎么写才合理
值是一组用空格分隔的尺寸，顺序对应从左到右（列）、从上到下（行）。支持多种单位组合，但要注意计算逻辑：
- px / % / em：固定或相对容器尺寸，直接占用空间
- fr：不是百分比，而是“剩余空间的弹性份数”。例如 1fr 2fr 表示把扣掉其他固定尺寸后的空间按 1:2 分配
- auto：由内容宽度/高度撑开，可能挤压其他轨道
- minmax(min, max)：最实用的安全写法，比如 minmax(0, 1fr) 允许轨道收缩到 0，避免内容溢出；minmax(150px, max-content) 保证最小高度又不卡死
响应式与动态列数靠 repeat() + auto-fit
想让列数随容器宽度自动增减（比如小屏1列、大屏3列），不能只靠固定数字。要用 repeat() 配合 auto-fit 或 auto-fill：
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))); —— 推荐用 auto-fit，它会合并空轨道，更紧凑
- 避免写 repeat(auto-fill, 1fr)，窄屏下可能生成大量不可见列，引发横向滚动
- auto-fill 优先填满容器，auto-fit 优先收缩轨道并合并空白
隐式轨道要单独控制
当子项数量超过你显式定义的行列数时，Grid 会自动生成额外轨道（隐式网格）。这时 grid-template-rows/columns 不再起作用，得用：
- grid-auto-rows：控制自动创建的行的高度，如 grid-auto-rows: 80px 或 grid-auto-rows: minmax(100px, auto)
- grid-auto-columns：同理控制隐式列的宽度
- grid-auto-flow：决定新项目是按行还是按列优先填入（默认 row）
