多列图文混排应优先使用css grid的auto-fit+minmax实现智能断行，确保卡片为grid直系子项、图片设max-width:100%和height:auto，辅以flex-wrap作为轻量备选，并通过flex-direction与order控制移动端图文顺序。
多列图文混排的自动断行，核心不是“让每张图手动换行”，而是让整个卡片组按容器宽度智能分列、自然折行——关键在布局模型选对、图片约束到位、列数逻辑写稳。
用 grid-template-columns: repeat(auto-fit, minmax()) 控制列数
这是最可靠起点，无需写一堆媒体查询就能自适应：
- auto-fit + minmax(300px, 1fr)：每列至少 300px（适合手机横屏以上），空间够就均分；空列自动消失，不会留白
- 别用 auto-fill——它会保留不可见的空列，小屏下容易撑宽容器
- 卡片必须是 grid 直接子项，中间不能套多余 wrapper，否则 auto-fit 失效
每张卡片内图文必须等高且不溢出
图文混排错乱，90% 源于图片没被正确约束：
- 给
加 max-width: 100% 和 height: auto，否则浏览器仍按原始尺寸参与布局
- 加 display: block，消除 inline 默认的基线间隙
- 避免设固定 width/height（如 width: 200px），会拉伸变形；慎用 object-fit: cover（裁剪）或 contain（留白）
用 flex-wrap: wrap 做备选方案（适合简单横向列表）
当卡片结构较轻、不需要严格等高时，flex 更易上手：
- 父容器设 display: flex; flex-wrap: wrap; gap: 16px
- 每张卡片设 flex-basis: calc(33.333% - 16px)（三列）或 min-width: 280px（更稳妥）
- 注意：flex-basis 是“建议宽度”，最终列数由容器宽度和 gap 共同决定，比纯百分比更抗缩放
移动端图文顺序翻转但不改 HTML 结构
SEO 和可访问性要求图片在 HTML 中写在文字前面，但小屏常需文字在上、图片在下：
- 桌面端用 flex-direction: row 或 grid，默认左图右文
- 小屏媒体查询里切到 flex-direction: column，再统一用 order: 0 / order: 1 调整视觉顺序
- 别用极端 order 值（如 -999），旧版 Safari 解析不稳定；也别在 flex-wrap 容器里对子元素单独设 order，会导致每行排序独立、视觉断层
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
