Grid项是否“固定尺寸”取决于容器的grid-template-columns/rows是否全用绝对单位（如px、rem）或minmax(200px,200px)，而非fr或auto；混用会导致部分轨道浮动；子项应避免设width/height以免溢出；响应式中宜用clamp()或媒体查询替代纯固定值。
grid-template-columns 中使用固定长度单位（如 px、rem）
Grid 项是否“固定尺寸”，关键不在 grid-item 自身，而在容器的 grid-template-columns 和 grid-template-rows 如何定义轨道。若你希望每列宽 200px、每行高 120px，直接写死即可：
.grid {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 120px 120px;
}
这样所有显式定义的轨道都是固定尺寸，子项在无额外拉伸规则时会自然按轨道边界布局。注意：这里没用 repeat() 不代表不能用——repeat(3, 200px) 效果等价，更简洁。
避免 fr 单位和 auto 导致尺寸浮动
fr 是弹性单位，auto 依赖内容或可用空间，二者都会让实际尺寸不可控。比如下面这行会让三列按比例分配剩余空间，不是固定宽：
grid-template-columns: 1fr 1fr 1fr;
常见误操作是混用：200px 1fr 200px ——中间列仍会随容器缩放。确保所有轨道都用绝对单位（px、rem、em、cm 等）或明确的 minmax(200px, 200px) 才真正锁定尺寸。
立即学习“前端免费学习笔记（深入）”；
-
minmax(200px, 200px)等价于固定 200px，但语义更清晰，且兼容某些需要 minmax 的场景（如配合auto-fit） - 慎用
grid-auto-columns：它只影响隐式网格的列，而隐式网格通常由grid-column越界触发，容易意外引入非固定轨道
grid-item 自身不设 width/height，除非覆盖轨道约束
一旦容器轨道固定，多数情况下应让子项“顺从”轨道，即不设置 width 或 height。否则可能触发溢出或对齐冲突：
- 若子项设了
width: 300px，但所在列只有200px，它会溢出（除非overflow: hidden） -
align-self/justify-self可微调对齐，但不会改变轨道大小；想撑开轨道？说明轨道定义本身没锁死 - 用
box-sizing: border-box避免 padding/border 导致实际尺寸超限
响应式下固定尺寸的取舍与替代方案
纯固定尺寸在小屏上极易导致横向滚动或内容截断。真要兼顾“固定感”和适配，可考虑：
- 媒体查询中切换不同固定值：
@media (max-width: 768px) { grid-template-columns: 150px 150px; } - 用
vmin或clamp()替代 px：grid-template-columns: clamp(160px, 25vw, 200px);—— 在阈值间弹性变化，视觉上接近“稳定” - 放弃完全固定，改用
minmax(min-content, max-content)配合fit-content(200px)，让内容决定上限但不突破预设
固定尺寸不是万能解法，尤其当内容长度不可控或需多端适配时，硬锁 px 往往是问题起点，而不是终点。
