grid-auto-rows 和 grid-auto-columns 是控制隐式网格轨道尺寸的属性。它们在子元素超出显式定义的行列时生效，分别设定自动创建的行高和列宽，避免因默认 auto 值导致塌陷或布局断裂。
grid-auto-rows 和 grid-auto-columns 是什么
它们不是定义显式网格线的属性，而是控制「隐式网格轨道」尺寸的后备机制。当你用 grid-template-rows 或 grid-template-columns 只定义了部分行/列（比如只写了 2 行），但子元素实际需要更多行（比如第 3 个元素被放到第 4 行），浏览器就会自动生成隐式轨道——grid-auto-rows 就管这些“凭空多出来”的行高，grid-auto-columns 管多出来的列宽。
不设 grid-auto-rows 时的常见错误现象
默认值是 auto，看起来没问题，但容易在内容高度不一致时出问题：
- 多个
grid-area跨行后，后续隐式行可能被压缩成 0 高（尤其配合align-content: start） - 动态插入新元素（如 JS append）后，新行高度塌陷，文字溢出或不可见
- 使用
minmax(0, 1fr)之类弹性值时，auto不参与 fr 分配，导致布局断裂
推荐显式设为 minmax(min-content, max-content) 或具体值（如 40px），避免依赖默认行为。
grid-auto-columns 在响应式列数变化时的关键作用
当用 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))) 实现流式列数时，grid-auto-columns **完全不起作用**——因为所有列都由 repeat() 显式生成，没有隐式列产生。它只在以下场景生效：
立即学习“前端免费学习笔记（深入）”；
- 子元素用
grid-column: 5 / 7跳过现有列，强制创建第 6 列 -
grid-template-columns只写了1fr 1fr，但某个子项写grid-column: 1 / -1并触发换行，新行需要额外列轨道 - JS 动态设置
element.style.gridColumn = "10"，而当前只有 3 列
此时若没设 grid-auto-columns，新增列宽度为 auto，常导致内容撑开、破坏等宽预期。建议设为 minmax(0, 1fr) 或固定值（如 250px）保持可控。
与 grid-template-areas 配合时的陷阱
当使用 grid-template-areas 定义命名区域时，隐式轨道依然存在，但容易被忽略：
.container {
display: grid;
grid-template-areas:
"header header"
"main sidebar";
grid-auto-rows: 100px; /* 这里生效 */
grid-auto-columns: 200px; /* 这里也生效 */
}如果某个子元素写 grid-area: "footer"，而 grid-template-areas 里没定义 footer，它会被放到隐式行中——这时 grid-auto-rows 才真正起作用。但注意：grid-template-areas 中每行字符串长度必须一致，否则整条声明无效，隐式轨道行为会变得难以预测。
隐式轨道本身不参与命名区域对齐，也不受 grid-row-gap / grid-column-gap 的“间隙继承”影响（gap 只作用于显式+隐式轨道之间的间隙，不改变隐式轨道内部尺寸）。
