grid-auto-flow: row 与 auto-fit 组合最稳，配合 minmax() 定义列轨道可实现动态项目自动填满换行；需设 grid-auto-rows 防塌陷；插特定位置用占位符 replacewith；order 不适用于动态排序。
grid-auto-flow: row + auto-fit 是默认且最稳的组合
动态加载项目（比如 AJAX 拉取的新卡片）要自动填满容器、换行不乱序，核心不是靠 JS 插入位置，而是让 Grid 自己“认出”该往哪放。默认 grid-auto-flow: row 就是为此设计的——它告诉浏览器：新项来了，先塞满当前行，不够就新开一行。
但只设 grid-auto-flow: row 不够，必须配合列轨道定义，否则所有项会挤在第一行无限延伸：
-
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))是首选：最小宽度兜底，内容少时列拉伸占满，内容多时自动换行 - 别用
auto-fill：它会为“可能存在的项”预留空列，导致加载前就留白，视觉上像布局未就绪 - 避免固定列数如
repeat(3, 1fr)：动态项数不确定时，最后一行常只剩 1–2 个，留大片空白
动态插入后高度塌陷？查 grid-auto-rows 是否缺失
JS 动态 append 一个新 <div> 进 Grid 容器后，如果它看起来被压扁、文字截断或和其他项高度不齐，大概率是隐式行没设最小高度。
<p>显式行（<code>grid-template-rows）只管你写死的那些行；动态加进来的项，全落在隐式行里。浏览器对隐式行的默认高度是 auto，但这个 auto 在无约束下极易坍缩：
- 加
grid-auto-rows: minmax(48px, auto)：保证每行至少能舒展显示一行文本+内边距，内容高了就自动撑开 - 别写
grid-auto-rows: 60px：字体放大、行高变化、多行文本都会溢出或裁剪 - 若容器高度固定（如
height: 500px），才考虑grid-auto-rows: 1fr，否则容易把空行撑满视口
想插到特定位置（比如“加载中”下方）？用占位符 + replaceWith
靠 insertBefore 或 appendChild 往 Grid 里硬插，位置不可控——尤其开了 grid-auto-flow: dense 后，浏览器可能把新项塞去填前面空缺，完全偏离预期。
真正可靠的做法是预埋语义化占位符，并用 DOM 替换而非插入：
- HTML 里写一个
<div class="placeholder" style="grid-row-start: 4;">，并设 <code>display: contents或visibility: hidden（别用display: none，它会让网格线失效） - JS 加载完数据后，调用
placeholder.replaceWith(newItem)，新元素自动继承原占位符的grid-row-start位置 - 占位符本身的高度控制交给
minmax()：比如grid-auto-rows: minmax(56px, max-content)，适配不同屏幕的文字渲染高度 - JS 批量更新多个
order值时，浏览器可能分多次重排，造成视觉抖动 - 无法和
grid-column/grid-row配合做精准定位，容易覆盖原有布局意图 - SSR 渲染时
style.order不生效，首屏和客户端行为不一致
order 属性能重排，但别拿来“动态加载排序”
order 确实能让子项视觉重排，但它只在父容器是 display: grid 时生效，且改变的是可访问性顺序（tab 键焦点、屏幕阅读器朗读流）。
对动态加载场景，它有三个硬伤：
真要按时间、热度等字段重排，更稳妥的是：服务端/客户端统一排序后生成 HTML 结构，再交由 Grid 自动填充。Grid 的自动流本就不该承担排序逻辑。
