图文分割应避免滥用grid-template-areas，须基于轨道思维用grid-template-columns与grid-column控制；响应式下通过修改轨道定义而非重写区域，配合grid-row调整顺序；需约束内容高度防拉伸，并重视语义与视觉节奏匹配。
grid布局中图文分割的常见错误
很多人一上来就用 grid-template-areas 写死区域名，结果图片和文字内容长度一变，整个布局就错位或溢出。根本原因是没理解 grid 的“轨道”本质——它按行/列划分空间，不是靠区域名绑定内容位置。
用 grid-template-columns + grid-column 控制图文左右分割
适合标题+配图、简介+侧边图等经典两栏图文场景。关键不是写满所有区域，而是让文字内容自然流，再用 grid-column 把图片“拎出来”定位。
-
grid-template-columns: 1fr 300px—— 左侧文字自适应，右侧固定宽图片容器 - 文字容器不设
grid-column，让它默认占第一列 - 图片元素加
grid-column: 2，自动落到第二列；若需跨行，补上grid-row: 1 / -1 - 注意：图片父容器必须是
display: grid，且子元素不能用float或position: absolute破坏网格流
article {
display: grid;
grid-template-columns: 1fr 300px;
gap: 24px;
}
article img {
grid-column: 2;
grid-row: 1 / -1;
width: 100%;
object-fit: cover;
}
响应式图文分割：用 grid-auto-flow + media query 动态切换
移动端通常要改成“图在上、文在下”，但很多人直接写两个 grid-template-areas，结果在断点切换时触发重排导致闪动。更稳的做法是保持同一套网格结构，只改轨道定义。
- 桌面端：
grid-template-columns: 1fr 250px+grid-template-rows: auto - 移动端：
grid-template-columns: 1fr+grid-template-rows: auto auto，再用grid-row调整图文顺序 - 避免用
grid-area，改用grid-column和grid-row组合控制，兼容性更好（IE 不支持grid-area别名） - 如果图文数量不固定（比如多张小图+多段说明），优先用
grid-auto-flow: dense配合grid-column-start手动卡位
图文比例失衡时的容错处理
当图片高度远大于文字，或文字极长而图片很矮，单纯靠 grid-row: 1 / -1 会拉伸整行高度，造成大片空白。这时候得靠内容容器自身约束，而不是指望网格撑开。
立即学习“前端免费学习笔记（深入）”；
- 给图片容器加
max-height: min(60vh, 800px)，配合overflow: hidden - 文字区域用
min-height: 200px防止塌陷，但不用height锁死 - 绝对不要对
grid-row使用非数字值（如grid-row: 1 / span content），CSS Grid 不支持这种写法 - 调试时打开浏览器开发者工具的“Layout”面板，勾选“Grid”，能直观看到轨道线是否被内容意外撑开
