使用grid-template-areas可直观实现图文混排：1. 定义网格容器，用字符串命名区域，如"header header""image content""footer footer"；2. 子元素通过grid-area分配至对应区域，结构清晰；3. 可用"."留空，创建非对称布局，如图片跨两行；4. 配合媒体查询响应式调整，移动端改为垂直堆叠。布局语义明确，维护方便，适合复杂排版。
使用CSS Grid的grid-template-areas可以非常直观地实现文字与图片的混排布局。它允许你通过命名网格区域，以可视化的方式规划页面结构，特别适合复杂的图文组合排版。
1. 定义网格容器与模板区域
要使用grid-template-areas，首先需要将父容器设为Grid布局，并用字符串定义每一行的区域名称。每个字符串代表一行，每个单词代表一个网格单元格。
.container {
display: grid;
grid-template-areas:
"header header"
"image content"
"footer footer";
gap: 16px;
}
上面代码定义了一个三行两列的布局：header占满第一行，image在左下，content在右下，footer在最后一行。
2. 将子元素分配到命名区域
接着，把具体的HTML元素通过grid-area属性分配到对应的区域中。
立即学习“前端免费学习笔记（深入）”；
.header { grid-area: header; }
.image { grid-area: image; }
.content { grid-area: content; }
.footer { grid-area: footer; }
例如：
文章标题 @@##@@这里是文字内容…
这样图片和文字就会按照预想的位置排列，结构清晰且易于维护。
3. 实现更灵活的图文混排
你可以利用.表示空单元格，创建不对称或留白布局。比如让图片跨两行，文字在右侧上下分布：
.container {
display: grid;
grid-template-areas:
"image title"
"image text"
". footnote";
grid-template-columns: 1fr 2fr;
}
.title { grid-area: title; }
.text { grid-area: text; }
.footnote { grid-area: footnote; }
.image { grid-area: image; }
这种布局适合博客、新闻页等需要突出视觉内容的场景。图片占据左侧两行，标题和正文分别在右侧上下，底部还有一行注释。
4. 响应式调整模板（配合媒体查询）
在移动端可以改变grid-template-areas的结构，使内容变为垂直堆叠：
@media (max-width: 600px) {
.container {
grid-template-areas:
"header"
"image"
"content"
"footer";
}
}
此时所有区域垂直排列，更适合小屏幕阅读。这种方式无需修改HTML结构，仅通过CSS即可完成布局重构。
基本上就这些。用grid-template-areas做图文混排，语义清晰、维护方便，是现代CSS布局的强大工具。不复杂但容易忽略细节，比如区域名称必须用引号包裹、每行单词数要一致等。掌握后能大幅提升布局效率。
