真自适应网格应使用repeat(auto-fit, minmax(300px, 1fr)))，配合gap、避免写死grid-column、降级flex布局兼容IE，注意minmax最小值需依内容调试。
用 grid-template-columns 配合 minmax() 和 fr 单位实现真正自适应
固定列数的网格（比如写死 grid-template-columns: repeat(3, 1fr)）在小屏上会挤成一列难看的窄条，这不是“自适应”，只是“等分”。真自适应得让列数随容器宽度自动增减。核心是用 repeat(auto-fit, minmax(300px, 1fr))) —— 这行代码的意思是：每列最小 300px，尽可能铺满，不够 300px 就少占一列，浏览器自动算该放几列。
常见错误是写成 auto-fill：它会把空列也占位，导致右侧留白；auto-fit 才会收缩掉空列，让剩余列拉伸填满。
-
minmax(300px, 1fr)中的300px要根据内容调整，文字卡片建议 280–320px，图片卡片可设为minmax(250px, 1fr) - 别漏掉
gap：加grid-gap: 1rem或gap: 1rem，否则列之间没间距 - 如果子元素有固定宽高（比如
img），记得加width: 100%和height: auto，不然会撑破网格
避免 grid-column 写死导致响应失效
有人给某个子项写 grid-column: 1 / -1 让它横跨全行，这在单列时没问题，但多列时它会强行占满整行，破坏其他项的自动排列。更稳妥的做法是用 grid-column: span 2（跨 2 列）或干脆不设，让所有子项按默认顺序流式填充。
另一个坑是用了 grid-area 命名区域再配合 grid-template-areas —— 这种写法本质是静态布局，无法响应列数变化，只适合页头/页脚这类固定结构，别用在主体网格里。
立即学习“前端免费学习笔记（深入）”；
- 需要突出某一项？用
order属性调整视觉顺序，而不是靠grid-column强拉位置 - 想让某项在小屏独占一行？用媒体查询单独设
grid-column: 1 / -1，不要全局写死
兼容性兜底：IE 不支持 display: grid 怎么办
如果你必须支持 IE11，display: grid 直接失效，此时不能靠 polyfill（如 postcss-grid-kiss）模拟，因为 IE 对 Grid 的支持极其残缺。唯一可靠方案是降级为 display: flex + flex-wrap: wrap。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
关键点在于：Flex 布局下，列宽控制靠 flex-basis，不是 minmax()。示例：
/* Grid 方案 */
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))); gap: 1rem; }
<p>/<em> IE11 兜底 </em>/
@supports not (display: grid) {
.container { display: flex; flex-wrap: wrap; }
.container > * { flex-basis: calc(33.333% - 0.666rem); margin: 0.5rem; }
}注意 flex-basis 要减去间隙的一半（这里 gap: 1rem，所以每项左右 margin 各 0.5rem），否则换行错乱。
移动端触摸体验差？检查 grid-auto-flow 和溢出行为
默认 grid-auto-flow: row 是从左到右、从上到下填，但如果内容高度差异大（比如有的卡片文字多、有的只有图标），会出现“阶梯状”错位，用户横向滑动时手指容易误触空白区。这时加 grid-auto-flow: row dense 可以让后续项尽量往上填空，减少纵向空隙。
但要注意：dense 模式会打乱 DOM 顺序，对屏幕阅读器不友好；如果内容有逻辑顺序（比如时间线），就别开它。
- 防止横向滚动：确保父容器没意外的
white-space: nowrap或子项内联元素没设display: inline-block且没处理换行 - 触摸反馈弱？给子项加
cursor: pointer和touch-action: manipulation，尤其在 iOS 上能提升点击灵敏度
实际项目里最常被忽略的是 minmax() 里的最小值设定——设太大，小屏只剩一列；设太小，中屏出现四列挤在一起。最好用 Chrome DevTools 的设备模拟器反复拖动宽度，观察临界点在哪，再反推这个最小值。
