设置固定像素值如100px不能真正锁定列宽，因CSS Grid默认minmax(min-content, max-content)行为会使内容撑开格子；需用minmax()或fit-content()配合overflow等控制内容流。
直接用 grid-template-columns 里混写固定像素值和 fr 单位是可行的，但“固定大小”不等于“内容不撑开”，很多人卡在这一步——你以为设了 100px 就万事大吉，结果文字一长、图片一宽，网格项照样溢出或拉伸。
为什么设置了 100px 还会变宽？
因为 CSS Grid 默认启用 minmax(min-content, max-content) 行为：即使你写了 100px，只要内容（比如一个没换行的长单词或大图）天然宽度 > 100px，格子就会自动扩容。这不是 bug，是设计使然。
-
100px实际等价于minmax(100px, 100px)？错，它只是 track 的基准尺寸，不是约束 - 真正起约束作用的是
minmax()或fit-content() -
fr单位永远参与剩余空间分配，和固定值共存时不会“抢地盘”，但也不管固定列里的内容是否溢出
怎么真正锁死某一列/行的宽度？
用 minmax() 显式限定上下界，或者用 fit-content() 配合 max-width 控制内容流。常见组合：
- 绝对锁定（完全不随内容变）：
minmax(200px, 200px) - 允许收缩但不扩张：
minmax(0, 200px)（注意：需配合overflow处理内容） - 内容自适应上限：
fit-content(250px)→ 最多占 250px，内容短就更窄 - 固定 + 弹性混合：
grid-template-columns: 120px 1fr 200px;没问题，但第 1 列仍可能被内容撑开，得额外加overflow: hidden或white-space: nowrap
fr 和固定值混用时要注意什么？
fr 只分“剩余可用空间”，而这个“剩余”是在所有固定尺寸（以及 minmax 下限）扣完之后才算的。容易忽略的点：
立即学习“前端免费学习笔记（深入）”；
- 如果某列设了
minmax(300px, max-content)，但容器总宽只有 280px，整行会触发滚动或溢出，fr列拿不到任何空间 -
grid-auto-columns不影响已声明的grid-template-columns，别指望它补救漏掉的列 - 响应式中，用
minmax(200px, 1fr)比单纯1fr更安全——既保底又弹性
/* 示例：左侧固定 120px 图标栏，中间弹性，右侧固定操作列 */
.container {
display: grid;
grid-template-columns: minmax(120px, 120px) 1fr minmax(160px, 160px);
gap: 8px;
}
/* 确保图标列不被文字撑开 */
.container > :first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
真正让网格元素“固定大小”的关键不在 grid-template-columns 单独写多少像素，而在你有没有同时控制该列内元素的盒模型行为。漏掉 overflow 或 white-space，再准的 minmax 也白搭。