grid-auto-rows: min-content 仅作用于隐式网格行，显式定义的 grid-template-rows 会完全覆盖它；其高度由内容自然尺寸决定，受容器限制、内容类型及浏览器差异影响。
grid-auto-rows: min-content 为什么没生效？
它只对「隐式网格行」起作用，而很多人误以为能控制所有行——显式定义的 grid-template-rows 会完全覆盖它。比如写了 grid-template-rows: 100px，那后面新增的行哪怕触发了隐式网格，该行高也还是由 grid-auto-rows 决定；但如果你写了 grid-template-rows: 100px 200px，第 3 行开始才是隐式行，grid-auto-rows 才接管。
常见错误现象：min-content 看起来“没反应”，其实是项内容本身撑不开（比如空 div、纯文本无换行、图片未设 max-width），或者父容器高度被限制死（如 height: 0 或 overflow: hidden）。
-
min-content指内容在不换行、不限宽前提下的最小自然高度（对块级元素，通常是行高 × 行数） - 若子项是图片且未约束尺寸，
min-content可能极大；加max-width: 100%和height: auto更可控 - 与
grid-auto-columns无关，别指望它影响列方向
min-content 和 auto / fit-content() 的关键区别
min-content 是纯内容驱动：文字不断行、图片不缩放时的高度；auto 则会拉伸以填满轨道（受 align-items 影响）；fit-content(200px) 是上限约束，但下限仍是内容自身高度。
使用场景：适合内容高度差异大、又不想留白或裁剪的卡片列表（如博客摘要、通知气泡）。但若所有项都需统一高度，min-content 反而造成参差——这时候该用 grid-auto-rows: 1fr 或显式固定值。
立即学习“前端免费学习笔记（深入）”；
-
min-content在 Firefox 中对 flex 子项计算更保守，Chrome 更激进（尤其含 inline-block 时） - 和
align-items: start搭配最自然；若设为center或end，项会居中/底对齐，但行高仍是min-content计算出的值 - 不触发重排（re-layout）优化，但频繁 DOM 变动 +
min-content可能导致滚动抖动
配合 grid-auto-flow: dense 使用时的陷阱
grid-auto-rows: min-content 和 grid-auto-flow: dense 一起用，容易让隐式行高度“错位”：dense 模式会把小项往前塞，但行高仍按插入位置的隐式行序号计算，不是按视觉顺序。
比如第 5 个项被 dense 塞进第 2 行，它实际占据的仍是第 5 行的隐式轨道，而第 2 行原本可能只有显式定义的高度（或没定义，走默认 auto）。
- 只要用了
grid-auto-flow: dense，就别依赖grid-auto-rows控制“视觉上相邻项”的高度一致性 - 想精确控制每行高度，改用
grid-template-rows: repeat(auto-fill, min-content)（注意这是显式模板，不走隐式逻辑） - 调试时用 DevTools 查看每个项的
grid-row-start和grid-row-end，确认它是否真的落在隐式行上
兼容性与 fallback 方案
IE 完全不支持 grid-auto-rows，Safari 10.1+ 支持 min-content，但 Safari 15.4 之前对嵌套 grid + min-content 有渲染 bug（行高塌陷）。
真正容易被忽略的是：当 JS 动态插入内容后，min-content 高度不会自动 reflow —— 浏览器只按初始渲染时的内容尺寸计算，后续文本变化、图片加载完成，高度不会更新（除非强制重绘，如改 display）。
- 对图片，监听
load事件后手动触发element.style.height = "auto"（再设回""）可绕过缓存高度 - CSS fallback：用
@supports not (grid-auto-rows: min-content)降级为display: block+margin-bottom - 服务端渲染时若内容未完整，
min-content会按空内容算，首屏可能过矮——需预留最小高度min-height: 48px
