grid-template-areas 用语义化名称定义网格区域，通过字符串“视觉草图”直观布局，配合 grid-area 快速分配元素，支持响应式一键切换结构，需注意行列数一致、用点号占位、名称严格匹配。

Grid网格布局用 grid-template-areas 可以直观地把页面划分成语义化区域，让复杂结构一目了然，不用嵌套多层容器或反复计算行列位置。

用名字定义区块，布局像写草图一样简单

你只需给每个网格单元起个有意义的名字（比如 "header"、"sidebar"），再用字符串拼成“视觉草图”，Grid 就自动按行分配区域：

display: grid;
grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";

每一行字符串对应一行网格，空格分隔列，相同名字的单元格自动合并为一个连续区域。

配合 grid-area 给元素精准“认领”位置

子元素只需设置 grid-area: header;，就直接落入对应区域——无需记行列线编号，也不用写 grid-row / grid-column：

• <header></header> 加 grid-area: header; → 填满第一行三列
• <aside></aside> 加 grid-area: sidebar; → 落在第二行第一列
• <main></main> 加 grid-area: main; → 占据第二行后两列

响应式切换只要改一行字符串

不同屏幕下重排结构？不用重写整个 Grid 规则，只替换 grid-template-areas 的字符串即可：

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

• 桌面端：竖排侧边栏 → "header header" "sidebar main" "footer footer"
• 移动端：侧边栏移到底部 → "header header" "main main" "sidebar sidebar" "footer footer"

名字不变，逻辑不变，只是“草图”变了，维护成本大幅降低。

注意事项：名字必须严格匹配，点号代表空单元格

grid-template-areas 对格式敏感：

• 所有行字符串列数必须一致，缺位用 .（英文句点）占位
• 名字区分大小写，且不能含空格或特殊字符
• 未被任何元素声明的区域会留空；多个同名区域会各自独立存在（不自动合并）

比如："header . aside" "main main main" 表示第一行中间留空，右侧是 aside 区域。

基本上就这些。用好 grid-template-areas，复杂布局就变成填字游戏——画好格子，贴上标签，各就各位。