用 grid-template-areas 配合媒体查询可实现图片与文字在不同屏幕下的布局换位：小屏竖排（text 在上、img 在下），大屏横排并调序（img 在左、text 在右），HTML 结构保持语义顺序不变，仅通过 CSS 控制视觉位置。
想让图片和文字在不同屏幕尺寸下自动换位（比如手机上文字在上、图片在下，桌面端反过来），用 grid-template-areas 是个清晰又可控的办法。关键不是“自动”换位，而是通过媒体查询切换两套区域定义，让同一组元素在不同断点中渲染到不同位置。
用 grid-template-areas 定义两套布局结构
先给容器设为 display: grid，再用 grid-template-areas 命名区域。同一组子元素（比如 .img 和 .text）通过 grid-area 指定归属区域。这样布局逻辑和内容结构就分离开了。
例如：
.container {
display: grid;
grid-template-areas:
"text"
"img";
}
@media (min-width: 768px) {
.container {
grid-template-areas:
"img text";
}
}
.img { grid-area: img; }
.text { grid-area: text; }
小屏时区域纵向排列，大屏时变成横向并排，且顺序调换——这就实现了“换位”。
立即学习“前端免费学习笔记（深入）”；
确保 HTML 结构保持语义与顺序不变
HTML 中图片和文字的书写顺序不影响视觉位置，但建议按内容优先级写（比如正文比配图更重要，就先写 .text）。这样对可访问性和 SEO 更友好，而视觉换位完全交给 CSS 控制。
- 不用改 HTML，只改 CSS 就能切换布局
- 避免用
order或float等易出错的方式强行调序 - 每个区域名在
grid-template-areas中必须完整对应，空格和引号不能错
适配更多断点时可叠加 media query
如果需要三段式换位（如：手机竖排 → 平板横排 → 桌面分栏），可以继续加媒体查询，每套 grid-template-areas 描述当前断点下的理想区域分布。
例如增加平板断点：
@media (min-width: 480px) and (max-width: 767px) {
.container {
grid-template-areas:
"text img";
}
}
注意断点范围别重叠，避免样式冲突。
配合 grid-gap 和响应式尺寸增强体验
换位后，记得同步调整间距和尺寸，让视觉更协调：
- 用
grid-gap控制区域间距离（推荐用gap简写） - 图片用
width: 100%+height: auto保证缩放不畸变 - 文字容器可设
max-width防止过宽影响阅读
基本上就这些。用 grid-template-areas 换位，逻辑直观、维护方便，比纯 flex + order 更易读，也比绝对定位更健壮。
