grid-template-columns 必须显式声明，否则网格无列结构；它决定列数并与 grid-template-areas 列数严格匹配，常见错误是二者不一致导致布局塌陷或元素错位。
grid-template-columns 必须显式声明，否则网格无列结构
不写 grid-template-columns，display: grid 容器就只有隐式网格——所有子元素默认挤在第一列，视觉上像单列流。这不是浏览器 bug，是规范行为：显式网格轨道必须靠它定义。
常见错误现象：grid-template-areas 写对了，但布局“突然塌成一列”，检查 computed 样式会发现 grid-template-columns 是 none 或空值。
- 三栏圣杯最常用组合：
grid-template-columns: 200px 1fr 200px（左固定、中弹性、右固定） - 若左侧栏需内容自适应宽度，可用
max-content或fit-content(200px)替代200px - 避免混用
%和fr：比如20% 1fr 20%中的%相对容器宽，fr分的是剩余空间，结果不可预测
1fr 不是百分比，而是剩余空间的弹性分配单位
1fr 表示“把当前轨道所在维度中，减去其他已定尺寸轨道后的剩余空间”等分一份。它不关心容器总宽，只响应同行/同列里其他轨道的尺寸变化。
例如：grid-template-columns: 200px 1fr 2fr —— 先扣掉 200px，剩下空间按 1:2 切成两份，中间列占 1/3 剩余，右侧占 2/3 剩余，不是总宽的 1/3 和 2/3。
- 主内容用
1fr而非auto：否则它不会撑高容器，footer可能上浮 - 含超宽表格或长单词时，
1fr可能强行压缩侧边栏；改用minmax(0, 1fr)更安全，允许内容溢出而不挤压 -
fr不能用于grid-template-rows的头尾区域（如 header/footer），那里该用auto或固定值
响应式列宽需同步更新 grid-template-areas 字符串
移动端收起侧边栏时，不能只改 grid-template-columns，还必须同步调整 grid-template-areas 字符串结构，否则区域名匹配断裂，元素“消失”或错位。
错误做法：只把 grid-template-columns 改成 1fr，但 grid-template-areas 还保留 "left main right" —— 浏览器仍会尝试渲染三列，导致空白或换行异常。
- 正确响应式写法：
@media (max-width: 768px) { .container { grid-template-areas: "header" "main" "footer"; grid-template-columns: 1fr; } } - 如果仍需显示某侧边栏（如导航），可改为单列堆叠：
"header" "nav" "main" "footer"，并配grid-template-columns: 1fr - 所有字符串中每行单词数必须一致；删掉一个区域名（如
right），就要整行重写，不能留空位
别依赖父容器自动推导列数，显式值决定布局稳定性
grid-template-areas 只定义语义位置，不控制列数。列数完全由 grid-template-columns 的值中空格分隔的项数决定——有几项，就有几列。
例如：grid-template-areas: "header header header" "nav main aside" 是三列布局，但若 grid-template-columns: 200px 1fr（只有两项），浏览器会忽略第三列区域，aside 无法渲染到预期位置。
- 务必核对：列数 =
grid-template-columns值中轨道数 = 每行grid-template-areas字符串中的单词数 - 用
repeat()简化重复轨道，如repeat(3, 200px)，但要确保与区域字符串列数对齐 - 调试时，在 DevTools 的 Layout 面板里看 Grid overlay，能直接看到列数是否匹配
grid-template-columns 和 grid-template-areas 之间的列数契约——它们必须字面一致，差一个空格、多一个单词、少一项值，整个网格都会静默退化为文档流。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
