CSS grid-template-areas值本质是单字符串，换行符被视为空格，但每行引号内字符数必须严格对齐，否则区域名错位导致声明被忽略；不支持\行继续符；推荐每行独立引号、空格分隔、注释辅助对齐，并禁用Prettier自动格式化。
Grid模板字符串换行后浏览器不识别
CSS grid-template-areas 的值本质是单个字符串，换行符（\n）在 CSS 解析时会被当作空格处理，但**必须保证每行引号内字符数严格对齐**，否则区域名错位、拼接失败，浏览器直接忽略整条声明。
- 错误写法：
grid-template-areas: "header header" "nav main" "footer footer";—— 两行长度不等，nav和main实际被解析成"nav main"这一个区域名 - 正确做法：每行用独立引号包裹，且每行单词数量一致、位置一一对应
- 推荐用缩进对齐视觉结构，但缩进空格不参与解析，只靠引号内空格分隔区域名
用反斜杠 \ 换行是否可行
不行。grid-template-areas 值不支持 CSS 的行继续符 \。写成这样会直接报语法错误：
grid-template-areas: \ "header header" \ "nav main" \ "footer footer";
浏览器解析到第一个 \ 就终止，后续内容被丢弃。这不是换行问题，是 CSS 语法层面不支持该转义形式。
实际项目中怎么写才既清晰又安全
把模板拆成多行字符串，每行独立引号，用 CSS 注释辅助对齐，靠空格控制列宽 —— 这是最稳妥的工程写法。
立即学习“前端免费学习笔记（深入）”；
- 每行引号内用空格分隔区域名，空格数决定列宽比例（如两个空格 ≈ 两列宽）
- 区域名必须全小写、无连字符（
sidebar-left是非法名，得用sidebar_left或sidebarLeft） - 空区域用
.占位，且.之间也要有空格，否则会被合并
示例：
grid-template-areas: "header header header" "nav main aside" "footer footer footer";
自动格式化工具（如 Prettier）会破坏模板对齐
Prettier 默认把长声明压成一行，或按字符数折行，完全不管 grid-template-areas 的语义对齐。一旦格式化，区域名错位、列数崩坏，布局当场失效。
- 在
.prettierrc中加"cssWhitespaceSensitivity": "strict"仅缓解，不解决 - 更可靠的是在声明前后加
/* prettier-ignore */ - 团队协作时，建议在 CSS 文件头部加注释说明：“此处 grid-template-areas 必须手动对齐，禁用自动换行”
换行本身不难，难的是让每行引号内的空格数、单词数、点位都精确匹配设计意图——少一个空格，整个网格区域映射就偏了。
