grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 是最稳起点，让浏览器按容器宽度自动计算列数，避免媒体查询漏断点与横竖屏混淆；auto-fit丢弃空列，卡片须为grid直系子项；图片需设 max-width: 100%、height: auto、display: block 防溢出失真；图文顺序用 order 在 column 下调控，禁用极端 order 值；深层嵌套时，minmax最小值、grid-area命名、图片约束共同决定语义与视觉一致性。
用 grid-template-columns: repeat(auto-fit, minmax()) 是最稳的起点，不是靠媒体查询硬切列数，而是让浏览器按容器宽度自动算出该排几列——手机单列、平板双列、桌面三列或四列，全由一行声明驱动。
为什么 auto-fit + minmax() 比 media query 更可靠
写一堆 @media (min-width: 768px) 容易漏断点，且 iPad 竖屏（768×1024）和横屏（1024×768）宽度相同但体验完全不同。而 minmax(300px, 1fr) 表示“每列至少 300px，有空间就均分”，auto-fit 会把空列直接丢弃，不占位、不留白。
-
auto-fill会保留不可见空列，小屏下可能撑宽父容器甚至触发横向滚动 - 卡片必须是
grid的**直系子项**；中间套了<div class="wrapper">就会让auto-fit失效 - 列数变化时，所有卡片自动重排，无需手动调
order或改 DOM 顺序
图片撑破容器的三个必设样式
90% 的图文错位，根源在 <img> 没被约束。光写 width: 100% 不够，浏览器仍按原始尺寸参与布局计算。
- 必须加
max-width: 100%和height: auto，否则高宽比失真或溢出 - 加
display: block，消除<img>默认inline带来的基线间隙 - 禁用固定
width/height（如width: 200px），也慎用object-fit: cover——它只裁剪，不解决溢出
图文顺序翻转但不改 HTML 结构
SEO 和屏幕阅读器要求图片在 HTML 中写在文字前面，但移动端常需文字在上、图片在下。用 order 是唯一不改 DOM 的解法，但它只在 flex-direction: column 下真正可控。
立即学习“前端免费学习笔记（深入）”；
- 桌面端用
display: grid或flex-direction: row，默认左图右文 - 小屏媒体查询里切到
flex-direction: column，再统一用order: 0（文字）和order: 1（图片）调整视觉顺序 - 别用
order: -999或order: 999，旧版 Safari 解析不稳定；也别在flex-wrap容器里对子项单独设order，会导致每行排序独立、视觉断层
真正难的不是让第一屏看起来对，而是当图文内容长度差异大、图片原始尺寸悬殊、容器嵌套层级变深时，grid-auto-flow: dense 和显式 grid-column 控制是否还保持语义与视觉一致——这时候，minmax() 的最小值、grid-area 的命名完整性、以及图片是否真的被 max-width 和 height: auto 锁死，就全暴露出来了。
