最稳起点是grid-auto-flow:dense配合repeat(auto-fit,minmax())，但需显式列线、图片约束和语义顺序分离，否则必现错位、拉伸、卡死。
直接用 grid-auto-flow: dense + repeat(auto-fit, minmax()) 是最稳的起点，但必须配合显式列线控制、图片约束和语义顺序分离，否则小屏错位、大图拉伸、空隙卡死全是必然结果。
为什么 grid-auto-flow: dense 必须配 minmax() 才能真自适应
只设 grid-auto-flow: dense 不写列定义，浏览器会按默认单列处理，dense 无处可填；只写 repeat(4, 1fr) 又硬编码列数，小屏直接溢出。关键在让列数随容器“活”起来：
-
repeat(auto-fit, minmax(280px, 1fr))：每列至少 280px（适配 iPhone 横屏），富余空间均分，空列自动消失 - 别用
auto-fill——它保留不可见空列，小屏下容器宽度被撑开，图文缩成细条 -
grid-auto-rows: minmax(120px, auto)必须设，否则高矮图文混排时，矮项会被高项“吊起”，留白严重 - 如果某张大图要跨两列，直接写
grid-column: span 2，不要依赖 dense 自动识别——dense 只回填，不主动跨
img 不加这三行，90% 的杂志排版都会崩
杂志风常见宽图、竖图、小图标混排，img 若没被严格约束，就会按原始尺寸参与网格轨道计算，导致列宽暴涨或塌缩：
- 必须加
max-width: 100%和height: auto：仅width: 100%会强制拉伸，height: auto保比例 - 必须加
display: block：消除img默认 inline 基线间隙，否则图文间多出 4px 空白 - 绝对不要设
width或height固定值（如width: 300px），也不要用object-fit: cover修图——裁剪破坏语义，且无法解决溢出根源
移动端图文顺序翻转，但不能动 HTML 结构
SEO 和屏幕阅读器要求图片在 HTML 中写在文字前面，但杂志风小屏常需文字在上、图片在下。靠 JS 重排或改 DOM 会断掉语义流，唯一合规解法是 CSS 控制视觉顺序：
- 桌面端用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，保持左图右文或上图下文默认流 - 小屏媒体查询里切到
flex-direction: column，再对图文子项统一用order：图片order: 2，文字order: 1 - 避免用
order: -999或order: 999——旧版 Safari 解析不稳定，只用 0/1/2 小整数 - 若图文是卡片列表（多个
.card），别对每张卡片内的img和p单独设order后又启用flex-wrap，否则每行独立排序，视觉断层
最易被忽略的：dense 只管视觉，不管语义
grid-auto-flow: dense 会让小图块“插空”进大图留下的缝隙，视觉紧凑，但它完全不保证阅读顺序。用户用键盘 tab 或屏幕阅读器浏览时，仍按 HTML 顺序走——所以：
- HTML 中图文顺序必须符合逻辑流（比如先图后文），这是 SEO 和无障碍底线
-
order和grid-column都只能用于视觉层调整，绝不能用来“补救”语义混乱的 DOM - 如果设计稿要求“大图居中、小图环绕”，不要硬塞进一个 grid 容器里靠 dense 填满——应拆成多个语义区块，用
grid-template-areas分区控制，再各自启用 dense
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
