grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))是移动端首选，因其实现纯CSS列数自适应：小屏单列、平板双列、桌面多列，无需媒体查询或JS；auto-fit自动合并空轨道避免留白，minmax确保每列≥300px且弹性均分剩余空间。
为什么 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 是移动端首选
这行代码能直接让栅格在手机、平板、桌面自动适配列数，不用写一堆 @media，也不依赖 JS。小屏下如果容器宽 320px，minmax(300px, 1fr) 会强制只排一列；768px 平板大概率出两列；1200px+ 自然撑到三列或四列——前提是父容器宽度正常、没被 float 或 position: absolute 截断文档流。
容易踩的坑：auto-fill 会保留空轨道，导致最后一行卡片右侧大片留白；auto-fit 才会收缩空列、让剩余列均分空间。别写成 repeat(auto-fill, ...)，否则移动端体验直接变差。
必须加的移动端兜底媒体查询
哪怕用了 auto-fit，320px 宽度下若子项最小宽度设成 280px，浏览器仍可能硬塞两列，引发横向滚动——这是用户最反感的问题之一。
必须手动加这一段：
@media (max-width: 480px) {
.grid {
grid-template-columns: 1fr;
}
}
注意不是 320px，而是 480px：覆盖 iPhone SE、旧款安卓小屏，同时避开部分平板误判。别用 display: block 覆盖 Grid，那会彻底破坏网格上下文，子项定位全失效。
gap 比 margin 更稳，但得避开这几个混用场景
gap 是 Grid 原生间距控制，不塌陷、不触发重排、不影响盒模型计算；而给每个卡片加 margin-right 和 margin-bottom，会在最后一行/列漏掉空隙，还容易和 justify-content: space-between 冲突。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
正确做法：
- 只在容器上设
gap: 16px（或grid-gap: 16px兼容旧 Safari） - 所有子项不写任何
margin - 如果容器本身有
padding: 16px，别把gap改成8px来“视觉对齐”，那会导致内容离边框过近 - 别在子项上同时用
padding和gap模拟等距，逻辑混乱且难调试
box-sizing: border-box 是隐形地雷，漏掉就错位
几乎所有移动端栅格错位问题，根源都在没统一盒模型。比如你设了 width: 33.33%，又加了 padding: 12px 和 border: 1px solid，实际宽度就超了 100%，小屏直接溢出。
解决方案只有一条：
* {
box-sizing: border-box;
}
必须放在全局 CSS 第一行，覆盖所有参与布局的元素（包括伪元素）。别只给卡片加，也别指望框架帮你兜底——Bootstrap 等库默认不设这个。
真正麻烦的是：它不报错、不警告，只在某些屏幕宽度下悄悄错位。调试时先查 computed 样式里 box-sizing 是否为 border-box，比猜布局逻辑快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
