grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 是最稳的无缝网格起点，但需协同 gap、box-sizing 和图片处理三者，缺一即导致错位、撑破或留白。
直接说结论：grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 是当前最稳的无缝网格起点，但“无缝”不等于“无坑”——它依赖 gap、box-sizing、图片处理三者协同，缺一就崩。
为什么 auto-fit + minmax() 容易在手机上错位
常见现象是卡片在小屏堆成一列但文字换行异常、图片撑破容器、最后一行留白或间隙不均。根本原因不是写法错，而是没控住“最小宽度下限”和“内容挤压空间”。
-
minmax(280px, 1fr)在 iPhone SE（375px 宽）上强行塞两列 → 每列只剩 187.5px，低于 280px 下限，浏览器被迫压缩内容而非换行 - 没设
box-sizing: border-box，导致 padding/margin 吃掉列宽余量，minmax()实际可用空间缩水 - 卡片内图片没加
width: 100%; height: auto;，原始尺寸顶开网格项高度，破坏行对齐
gap 和 box-sizing 必须一起配，不能只写 gap
gap 看似只是加间距，但它实际参与网格轨道计算。如果父容器没设 box-sizing: border-box，padding 会额外占空间，导致总宽超限、列数骤减甚至触发滚动条。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 务必在网格容器上写：
box-sizing: border-box;（全局重置也行） -
gap值建议从12px起手（手机），平板升到16px，桌面用24px—— 不要全屏统一写gap: 20px - IE10+ 兼容写法：用
grid-column-gap和grid-row-gap替代gap，避免空白列塌陷
图片变形、溢出、加载失败怎么防
网格里放图，最容易暴露的是尺寸失控和失败静默。不是加个 max-width: 100% 就完事。
- 统一用
aspect-ratio: 4/3或1/1锁定比例，比靠height更可靠；若需兼容旧 Safari，套一层div+overflow: hidden -
img标签必须加onerror="this.src='placeholder.svg'"，否则加载失败时留白或错位，网格自动重排 - 响应式源用
srcset+sizes，例如：<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw">
什么时候该切媒体查询，而不是硬调 minmax()
minmax() 解决的是“平滑缩放列数”，但列数突变（比如从 4→1）、卡片内元素堆叠顺序调整、gap 大幅缩减，这些必须靠媒体查询干预。
- 别在
@media (max-width: 480px)里写display: block—— 这等于放弃 Grid，卡片会失去对齐基准 - 关键断点只做三件事：改列数（如
repeat(1, 1fr)）、缩gap（12px）、调order（让标题在图下方） - Safari 15.4 之前不支持
gap在inline-grid上生效，所以容器必须是display: grid，别偷懒
真正难的不是写出那行 repeat(auto-fit, minmax())，而是每张图、每个卡片、每个断点都在悄悄吃掉你预留的“安全余量”。多测 iPhone SE 和 Pixel 5 的窄屏表现，比盯着 Chrome 桌面预览更有用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
