CSS Grid 比 Flexbox 更稳，因其用 repeat(auto-fit, minmax(400px, 1fr)) 实现自动列数切换与等高布局，避免图片溢出和断点失效；需配合 max-width: 100%、height: auto、display: block 约束图片，并用 order 调整图文顺序而不改 DOM。
用 display: grid 比用 display: flex 更稳，尤其当图文要等高、换行断点需精准、图片尺寸不可控时——flex 容易因子元素宽度计算偏差导致提前换行或溢出，而 grid 的 auto-fit + minmax() 能绕过这些陷阱。
用 grid-template-columns: repeat(auto-fit, minmax()) 控制列数
这是响应式图文并排最可靠的起点。它不依赖媒体查询就能自动从多列退化为单列，且每列有最小宽度兜底，避免小图被压扁。
-
minmax(400px, 1fr)表示：每列至少 400px（适合中屏以上），空间富余时均分剩余宽度 -
auto-fit会让空列直接消失，容器内所有项目自动重排，比写一堆@media (max-width: ...)更干净 - 别用
auto-fill——它会保留空列占位，导致小屏下出现“看不见的空白列” - 如果图文模块是卡片形式（图+文一组），每个卡片必须是 grid 直接子项；若套了多余 wrapper，
auto-fit就失效
让图片不撑破容器的三个硬性设置
几乎所有图文混排错乱，根源都在图片没被约束。光靠 width: 100% 不够，浏览器仍可能按原始尺寸参与布局计算。
- 必须加
max-width: 100%和height: auto，否则高宽比失真或溢出 - 加
display: block，消除<img alt="如何利用CSS实现响应式图文混排？" >默认的 inline 基线对齐间隙 - 慎用
object-fit：设cover会裁剪，设contain可能留白；若设计允许，优先用原图比例 +max-width - 绝对不要给
<img alt="如何利用CSS实现响应式图文混排？" >设固定height或width（如height: 200px），这会强制拉伸变形
图文顺序随屏幕翻转，但 HTML 不动
SEO 和可访问性要求图片在 HTML 中写在文字前面，但移动端常需文字在上、图片在下。用 order 是唯一不改 DOM 的解法，但它只在 flex-direction: column 下真正可控。
立即学习“前端免费学习笔记（深入）”；
- 桌面端用
grid或flex-row，移动端媒体查询里切到flex-direction: column，再统一用order -
order值建议用0/1，别用-999或999——旧版 Safari 对极端值解析不稳定 - 写了
order: 1却没生效？先检查父容器是否设了display: flex，再确认子项没被display: contents或float干扰 - 如果图文模块是列表（多张卡片），别对每张卡片内的图/文单独设
order后又启用flex-wrap——order在 wrap 容器里是按“每行独立排序”，视觉会断层
真正难的不是写对第一屏效果，而是当图文内容高度差异大、图片加载延迟、或用户缩放页面时，布局还能保持稳定。这时候 grid-auto-rows: 1fr 比 align-items: stretch 更可靠，它强制所有行高一致，且不受子项内部 flex 干扰。
