必须定义grid-template-columns才能生成网格线，否则grid-column无效；移动端应优先使用repeat(auto-fit, minmax(280px, 1fr))实现弹性响应式列数，避免硬编码列宽或混用单位导致塌陷。
Grid 在移动端不是“能用”，而是“必须用对”——不定义 grid-template-columns，grid-column 就是摆设；不用 minmax() + auto-fit，响应式就靠猜。
为什么写了 grid-column: 1 / 3 却没效果
根本不是语法错，是网格线压根没生成。移动端容器设了 display: grid 只是开了个门，没写 grid-template-columns 就等于没修路，车（项目）再怎么写“从第1条线开到第3条线”，路上连标线都没有。
- 检查控制台是否报错？通常不报错，只是静默失效
- 临时加
border: 1px solid #000到容器上，看有没有列被渲染出来 - 移动端常见误写：
grid-template-columns: 1fr—— 这只有一列，1 / 3跨两列直接越界，浏览器会自动 fallback 到1 / 2 - 真要两列布局，至少得写
grid-template-columns: 1fr 1fr或更稳妥的grid-template-columns: repeat(2, 1fr)
grid-template-columns 在小屏上的安全写法
移动端最怕两种情况：小屏下内容挤成一团，或大屏留大片空白。硬写像素值（如 150px 150px）或纯百分比（如 50% 50%）都会翻车。
- 首选
repeat(auto-fit, minmax(280px, 1fr)))：保证每项最小 280px（适配 iPhone 竖屏），又能弹性撑满，空列自动折叠 - 避免混用单位，比如
200px 1fr在窄屏下可能让1fr变成负宽度，导致布局塌陷 - 如果要做固定侧边栏+主内容（如带 sidebar 的新闻页），用
grid-template-columns: 80px 1fr比auto 1fr更可控——auto会随内容撑宽，小屏易溢出 - 注意 Safari iOS 15.4 之前对
minmax(min, max)中max为1fr的解析有轻微延迟，加min-width: 0到项目上可缓解
gap 替代 margin 的实操细节
在移动端用 margin 给网格项“模拟间距”，是遗留陷阱：最后一行/列多出空白、横竖滚动条意外出现、缩放时错位——全因 margin 不参与网格计算。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 统一用容器级
gap: 12px（不是grid-gap，后者已废弃） -
gap对display: inline-grid无效，移动端慎用 inline-grid 容器 - 某项目需绝对定位（如悬浮按钮），它会脱离网格流，也不参与
gap计算，但不会影响其他项目间距 - 想让第一行顶部、最后一行底部也留空？
gap不管外边距，得单独给容器加padding
什么时候该用 grid-template-areas
命名区域不是炫技开关，是结构复杂度的分水岭。三栏导航+主内容这种简单布局，写 grid-column: 1 / 2 更快、更易改、调试时一眼看出位置。
- 只有当语义强且嵌套深时才启用，比如仪表盘含
header/sidebar/chart-1/chart-2/footer多区域 - HTML 结构微调（如删掉一个卡片）必须同步改 CSS 字符串里的引号和空格，漏一个字符整个
grid-template-areas失效，且无提示 - 移动端键盘弹起时，
grid-template-areas定义的区域不会重排，而基于线号的定位（如grid-row: 2）更稳定
真正卡住人的从来不是 Grid 语法本身，而是忘了：网格线编号从 1 开始、auto-fit 和 auto-fill 行为完全不同、以及 Safari 对 span 跨格在某些旧版本里仍会 fallback 到单格——这些细节不验证，上线后问题只在真机上浮现。
