正确做法是主容器设 grid-template-columns: 1fr，用 grid-column 控制子项位置实现左右交替；手机单列、桌面双列，配合媒体查询重置布局，避免 order 破坏可访问性。
grid-template-columns怎么设才不卡住换行？
左右交替布局本质是“奇数项左图右文、偶数项右图左文”，但直接用 grid-template-columns: 1fr 1fr 会把每组内容硬塞进两列，导致文案被截断或图片挤压变形。
正确做法是让每组内容占满整行，靠 grid-column 控制内部子项位置。主容器设为 display: grid + grid-template-columns: 1fr，再用媒体查询在桌面端扩展为两列：
- 手机端：单列，
grid-template-columns: 1fr，每组自然独占一行 - 平板及以上：双列，
grid-template-columns: 1fr 1fr，再配合grid-column: 1 / -1让标题等通栏元素跨全宽 - 关键点：不要给每组内容容器设固定列数，而是让它作为 grid item 参与整体布局
左右交替靠grid-column还是order？
用 order 会破坏 DOM 顺序，影响可访问性（screen reader 按源码读）、SEO 和打印样式；而 grid-column 只改变视觉位置，源码结构保持线性，更稳妥。
实操建议：
- 每组内容用一个
<section class="feature"></section>包裹，内部两个子元素：<div class="feature__image"> 和 <code><div class="feature__text"> <li>奇数 <code>.feature:nth-child(odd) .feature__image设grid-column: 1，.feature__text设grid-column: 2 - 偶数
.feature:nth-child(even) .feature__image设grid-column: 2，.feature__text设grid-column: 1 - 必须同时配
grid-template-columns: 1fr 1fr，否则grid-column: 2无效 - 要严格等高：给
.feature加align-items: stretch（默认值），并确保子项没设height或max-height锁死尺寸 - 要图文各自舒展：改用
align-items: start，再给.feature__text加align-self: center实现垂直居中，图片保持顶部对齐 - 注意 Safari 旧版本对
align-self在隐式网格轨道中的兼容性，可补min-height: 100%到父容器 - 手机端（
@media (max-width: 768px)）：移除所有grid-column，让子项按文档流自然排列 - 同时把
.feature的grid-template-columns改回1fr，避免残留列定义干扰 - 真机测试 iPad 竖屏时，确认 viewport meta 是否含
width=device-width, initial-scale=1，否则768px断点可能失效
图片和文案高度不一致时怎么对齐？
左右交替最常崩在“左图高、右文短”或反之，导致上下错位、视觉割裂。Grid 默认按行对齐，但不会自动拉伸子项填满高度。
解决方案分场景：
响应式断点下左右顺序怎么安全反转？
桌面端左右交替，手机端变成上下堆叠——这时不能只靠 grid-column，否则偶数项的图片仍会试图去第 2 列，造成溢出或隐藏。
可靠做法是用媒体查询重置布局流：
真正容易被忽略的是：左右交替布局中，图片的 object-fit: cover 和文案的 margin-block 必须在各断点下独立调试，不能依赖全局重置——小屏文案行高变大后，若没调 margin-bottom，和下张图的间距就会突兀放大。
