Grid行高列宽由grid-template-rows/columns控制，非row-gap或子项height；auto-fit收缩空列，auto-fill保留占位；隐式行用grid-auto-rows统一高度；line-height仅影响子项内文本，不直接改变轨道尺寸。
grid-template-rows 和 grid-template-columns 怎么设固定值
行高和列宽的控制核心在 grid-template-rows 和 grid-template-columns，不是 row-gap 或 height。它们接受空格分隔的轨道尺寸列表，每个值定义一行或一列的大小。
常见错误是以为给子元素设 height 就能撑开网格行——其实 Grid 容器的行高由自身模板决定，子项溢出或压缩都受此约束。
-
grid-template-rows: 40px 1fr 20vh—— 第一行固定 40px，第二行占剩余空间，第三行占视口高度 20% - 用
minmax(100px, auto)防止内容塌缩：比如图片没加载完时，行高不至于变成 0 - 避免写
grid-template-rows: 100px 100px后又让子项用align-self: stretch强撑——它不会突破轨道定义的尺寸
auto-fit 和 auto-fill 在列宽适配中怎么选
响应式网格列数动态变化时，auto-fit 和 auto-fill 是关键，但行为差异明显：一个会收缩空轨道，一个会保留空轨道占位。
典型场景是卡片列表在不同屏幕宽度下自动换列，比如用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))))。
立即学习“前端免费学习笔记（深入）”；
-
auto-fit：空轨道会被合并，剩余列等宽拉伸填满容器（推荐多数情况） -
auto-fill：即使没内容，也会预留所有可能的列轨道，可能导致右侧大片空白 - 注意
minmax()第二个参数别写死成1fr就完事——如果容器宽度小于单列最小值，整行可能崩溃或出现横向滚动
行高被内容撑开？检查 grid-auto-rows
当网格项数量超过 grid-template-rows 定义的行数时，新增行由 grid-auto-rows 控制，默认值是 auto，也就是“由内容高度决定”。这就导致看似统一的网格，实际行高参差不齐。
比如表格类布局中，某单元格有两行文字，对应行就被顶高，破坏对齐。
- 设
grid-auto-rows: 60px可强制所有隐式行等高（内容超出会裁剪或溢出） - 设
grid-auto-rows: minmax(60px, max-content)更稳妥：至少 60px，内容多就允许撑开 - 别依赖
grid-auto-rows做主布局——它只管“额外”的行；主结构行必须用grid-template-rows
line-height 对 Grid 子项无效？那是你没设对地方
line-height 本身不影响网格轨道尺寸，但它会影响子项内部文本的垂直对齐和行距。很多人误以为调它就能调“行高”，结果发现网格行没变化。
真正起效的是：子项内文本的 line-height 决定其自身高度（如果子项是 display: inline 或未设高度），进而可能触发 grid-auto-rows: auto 的计算。
- 若子项是块级且已设
height，line-height只影响内部文本位置，不改变容器尺寸 - 若子项是
display: flex或display: grid，line-height通常无视觉作用 - 想垂直居中文本又保持行高一致？优先用
display: flex; align-items: center，比靠line-height模拟更可靠
最易忽略的一点：CSS Grid 中“行高”不是单一属性控制的概念，而是 grid-template-rows、grid-auto-rows、子项自身尺寸、内容自然高度四者共同博弈的结果。改其中一个，得同步看另外三个是否还匹配。
