固定行列尺寸最直接方式是用px/em/rem/vh/vw等单位在grid-template-rows/columns中显式声明，如60px 120px 80px；repeat(3,80px)更简洁；grid-auto-rows仅作用于隐式行，不影响已定义的显式行；避免minmax()等条件函数，确保真正固定。
用 grid-template-rows 和 grid-template-columns 直接设固定尺寸
固定行高与列宽最直接的方式，就是用像素（px）、em、rem 或 vh/vw 这类绝对或视口单位，在 grid-template-rows 和 grid-template-columns 中显式声明每一条轨道的大小。
例如：
.grid {
display: grid;
grid-template-rows: 60px 120px 80px;
grid-template-columns: 150px 200px 150px;
}这样定义后，三行高度就分别是 60px、120px、80px，三列宽度也一一对应，不会因内容撑开或缩放——前提是没用 minmax()、auto 或 fr 这类弹性值。
- 如果某列内容超宽，默认会溢出容器（不换行也不拉伸），需配合
overflow或word-break控制 -
grid-auto-rows和grid-auto-columns不影响已定义的显式网格线，只作用于隐式网格（比如子项超出定义行列时自动生成的格子） - 用
px最稳妥，但响应性差；若需适配，可结合@media或clamp()替代固定值
避免误用 grid-auto-rows 试图“统一固定行高”
grid-auto-rows 看起来像能批量设行高，但它只对**隐式行**生效。如果你已经用 grid-template-rows 定义了 3 行，而第 4 个子项触发了第 4 行生成，这时 grid-auto-rows: 100px 才会让第 4 行高为 100px；前 3 行完全不受影响。
立即学习“前端免费学习笔记（深入）”；
常见错误写法：
.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr; /* 实际是等分，非固定 */
grid-auto-rows: 80px; /* 这里根本不会让前三行变固定 */
}- 想让所有行都固定，必须在
grid-template-rows里写死，如80px 80px 80px或简写为repeat(3, 80px) -
repeat(3, 80px)是合法且推荐的写法，比手写三次更清晰，也方便后期修改 - 若行数不固定但又要每行固定高，就得用 JS 动态生成
grid-template-rows，CSS 本身不支持“N 行 × 固定高”的纯声明式表达
注意 minmax() 和 fit-content() 的“假固定”陷阱
这两个函数常被误当作固定尺寸方案，其实它们是条件性约束：
-
minmax(100px, 100px)确实等效于固定100px，但多此一举，直接写100px更直观 -
minmax(100px, max-content)表示“至少 100px，最多由内容撑开”，一旦内容变高，行高就不再固定 -
fit-content(200px)是“最多 200px，但可缩小”，内容短时会收缩，不算真正固定
真正需要固定，就别绕弯——删掉所有 minmax、fit-content、auto、max-content，只留确定单位值。
固定尺寸下子元素溢出与对齐的实际表现
当行列都设为固定尺寸，子项内容超出时，默认行为是溢出裁剪（取决于父容器 overflow），且 justify-items/align-items 仍有效：
-
justify-items: start让内容贴左上角，右侧/下侧留白 -
align-self: center可单独控制某个子项垂直居中，但不会拉伸行高 - 若子项设了
height: 100%，它会严格占满所在行高（前提是父 grid 容器没设overflow: hidden挡住）
最容易忽略的一点：固定网格尺寸后，grid-gap（或 gap）会额外增加间距，总高度 = 所有行高之和 + 所有行间隙之和，计算布局时得把 gap 算进去。
