auto-fill 保留空轨道适合 hover 动画，auto-fit 收缩空列更省空间；minmax(200px,1fr) 实现响应式列宽，需配合 display:grid 和合理父容器宽度；clamp() 可替代 minmax() 第一参数实现平滑响应式，但需注意 Safari 兼容性。
grid-template-columns: repeat(auto-fill, minmax(...)) 是最常用解法
直接用 repeat(auto-fill, minmax(200px, 1fr)) 就能实现列宽自适应、数量自动填充。关键不在“怎么写”，而在“为什么选 auto-fill 而不是 auto-fit”——前者保留空轨道（适合 hover 动画留位），后者会收缩空列（更省空间但动画易跳变）。
常见错误是写成 repeat(auto-fill, 200px)：这只会固定列宽，不响应容器变化；或者漏掉 minmax()，导致小屏下内容溢出。
-
minmax(200px, 1fr)表示每列最小 200px，剩余空间平均分 - 容器需设
display: grid，且父容器宽度不能是fit-content或未定义 - 子项默认不换行，若想强制单行加
grid-auto-flow: column
gap 和 justify-items 配合决定留白与对齐
gap 控制列间/行间间距，但注意它不作用于容器边缘——如果需要四周留白，得额外给容器加 padding。而 justify-items: start | center | end 只影响单个子项在轨道内的对齐，和整体居中无关；真要让整组 grid 居中，得靠父容器的 text-align: center（配合 inline-grid）或外层 flex 包裹。
容易踩的坑：justify-content: center 是对齐整个 grid 内容区域，不是对齐列；align-items 则控制行高方向，对纯横向布局常被误加。
响应式断点里别硬写多套 repeat，用 clamp() 更简洁
与其在 @media 里反复改 grid-template-columns，不如直接用 clamp(250px, 25vw, 350px) 替代 minmax() 的第一个参数。例如：repeat(auto-fill, minmax(clamp(250px, 25vw, 350px), 1fr))——这样列宽随视口平滑变化，避免断点跳跃感。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
注意：clamp() 在 Safari 13.1+ 才完全支持，老版本需降级为媒体查询 + minmax()。
子项跨列时 auto-fill 自动重排会失效
一旦某个子项用了 grid-column: span 2，后续项可能无法严格按“填满一行再换行”排列，尤其当列数不整除时。此时浏览器仍按轨道数分配，但视觉上会出现空隙。
解决思路只有两个：
— 改用 grid-auto-flow: dense（允许重排，但顺序可能打乱）
— 或手动控制每行列数，放弃自动填充，改用明确列数如 repeat(3, 1fr)
真正复杂的布局（比如瀑布流+跨列+响应式），grid 的自动填充能力很快见顶，这时候该切到 display: contents 配合 JS 计算，或直接换 column-count。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
