隐式网格不会自动追加列表项，仅当子元素显式定位到未定义轨道（如grid-row:5但只定义3行）时才被动创建并应用grid-auto-rows；日常动态列表应使用repeat(auto-fit, minmax(280px,1fr))配合grid-auto-rows:minmax(min-content,max-content)。
隐式网格根本不会“自动追加”列表项
Grid 的隐式网格不是动态容器，它只在子元素被显式定位到未定义轨道时被动创建。你写 display: grid、不设 grid-template-rows，然后往里面 append() 一堆 <div>，它们依然按自动放置规则填进显式行里——除非你手动触发隐式轨道，否则 <code>grid-auto-rows 压根不生效。
什么情况下会真正创建隐式行？
只有这些操作会让浏览器生成新行（并应用 grid-auto-rows）：
- 某个子元素写了
grid-row: 5，但你只定义了 3 行显式轨道 - 用了
grid-area指向一个不存在的区域，比如grid-area: footer，而grid-template-areas里没声明footer - 多个子项跨行（
grid-row: span 2）后，后续项被挤到第 4 行，但显式只写了grid-template-rows: 100px 100px
注意：纯顺序插入、无任何 grid-row / grid-column 声明的子项，永远走自动放置流程，不会催生隐式行。
想让 JS 插入的列表项“看起来像自动追加”，得靠显式轨道 + auto-fit
日常动态列表（如无限滚动加载卡片）不该依赖隐式网格。正确做法是用显式列定义配合自动填充逻辑：
- 父容器设
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，列数随宽度实时计算 - 所有卡片保持默认自动放置（不写
grid-row），新插入的项自然落到下一行开头 - 必须配
grid-auto-rows: minmax(min-content, max-content)，否则跨行卡片或图文混排时，新行高度可能塌成 0 - 避免只设
grid-auto-rows: auto——它不参与 fr 分配，也不响应内容变化，在 Safari 和部分安卓 WebView 中容易出空高
示例关键 CSS：
.list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-auto-rows: minmax(min-content, max-content);
gap: 16px;
}
JS 插入后布局错乱？先检查这三件事
动态插入后出现溢出、堆叠或空白，大概率不是 Grid 问题，而是 DOM 或样式干扰：
- 图片没加
max-width: 100%和height: auto，强行撑开轨道 - 卡片内部用了
display: flex且含flex: 1，但没覆盖min-width: 0，劫持了 Grid 的尺寸计算 - 父容器被包在
display: flex容器里，且没设flex-basis: 100%或width: 100%，导致 Grid 无法获取有效 inline size 来解析1fr
隐式网格不是兜底方案，它是补漏机制。真正稳的动态列表，靠的是显式轨道定义 + 合理的 grid-auto-rows + 子项自身收敛控制。漏掉任意一环，视觉上就容易“突然多出空白”或“新项消失”。
