grid-template-columns 和 grid-template-rows 是 CSS Grid 布局的骨架，定义容器列宽与行高；值用空格分隔，支持 fr、auto、minmax()、repeat() 等；需注意隐式轨道和 grid-template-areas 的行列数匹配。
grid-template-columns 和 grid-template-rows 是什么
这两个属性是 CSS Grid 布局的骨架，直接定义容器在水平（列）和垂直（行）方向上划分多少轨道、每条轨道多宽/高。它们不控制子元素位置，只搭出网格框架；子元素用 grid-column / grid-row 或 grid-area 往里塞。
常用值写法与实际效果差异
值是空格分隔的一组轨道尺寸，顺序对应从左到右（列）或从上到下（行）。关键在于理解单位行为：
-
1fr表示“剩余空间均分”，不是固定像素；2fr 1fr表示第一列占剩余空间的 2/3，第二列占 1/3 -
auto让轨道收缩包裹内容，但受minmax()或父容器约束时可能撑开 -
minmax(200px, 1fr)是最实用的组合：最小 200px，最大可伸展到 1 份剩余空间 -
repeat(3, 1fr)等价于1fr 1fr 1fr，适合等分布局；repeat(auto-fit, minmax(200px, 1fr)))配合grid-gap实现响应式卡片流
容易被忽略的隐式轨道问题
显式声明的行列（通过 grid-template-columns / grid-template-rows）只创建“显式网格”。当子项超出范围（比如第 5 个子项放在第 6 列），浏览器会自动创建隐式轨道——这些轨道默认大小为 auto，常导致高度塌陷或宽度失控。
解决方法是显式设置隐式轨道行为：
立即学习“前端免费学习笔记（深入）”；
grid-auto-columns: 1fr; grid-auto-rows: minmax(100px, auto);
尤其注意：grid-auto-rows 不会影响显式声明的行高，只管那些“冒出来”的额外行。
和 grid-template-areas 的配合陷阱
如果同时用了 grid-template-areas，那么 grid-template-columns 和 grid-template-rows 必须与它行列数严格匹配。例如：
grid-template-areas: "header header" "main sidebar"; grid-template-columns: 1fr; /* ❌ 错！需要两个列轨道 */ grid-template-columns: 1fr 200px; /* ✅ 对应两列 */
少写一列，整个 grid-template-areas 失效，退化为无名网格；多写一列则末尾轨道闲置，但布局仍按区域字符串执行。
真正难调试的是：错误不会报错，只是视觉错乱，得靠浏览器开发者工具的网格叠加层去核对行列数是否对齐。
