设置相同fr单位后列宽不一致，根本原因是fr分配剩余空间且受内容最小宽度约束；用minmax(0, 1fr)可强制忽略内容限制实现严格均分。
为什么设置相同的 fr 单位后列宽还是不一致？
直接写 grid-template-columns: 1fr 1fr 1fr 看似均分，但实际列宽常出现像素级偏差——根本原因是 fr 分配的是**剩余可用空间**，而表格单元格内容（尤其是文本、内边距、字体渲染）会触发最小宽度约束（min-width: auto），导致浏览器优先满足内容撑开，再分配剩余空间。
- 含长英文单词或未折行文本的单元格会强制拉宽所在列
-
overflow: hidden或text-overflow: ellipsis不影响 grid 轨道计算，只作用于单元格内部 - 默认
align-content: stretch对列宽无影响，别指望它“对齐”列
用 minmax(0, 1fr) 强制忽略内容最小宽度
这是最有效的破局点：把 0 作为最小值，明确告诉 Grid “允许列压缩到 0”，从而让 1fr 真正按比例均分可用空间。注意不是 minmax(min-content, 1fr)，后者仍受内容限制。
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
- 必须对所有列统一使用，混用
1fr和minmax(0, 1fr)会导致计算逻辑错乱 - 搭配
overflow: hidden+text-overflow: ellipsis才能真正实现“内容截断但列宽严格一致” - 在 Firefox 中表现最稳定；Chrome 110+ 已修复早期
minmax(0, 1fr)的部分渲染 bug
处理表头固定、内容滚动时的列宽同步
Excel 类表格通常需固定表头，滚动 tbody。此时若仅对 thead 和 tbody 分别设 Grid，列宽极易脱节——Grid 容器独立计算，无法跨容器对齐轨道。
- 正确做法是整个表格（
table元素或包裹容器）设为display: grid，用grid-template-rows划分表头/主体区域 - 表头行（
thead tr）和数据行（tbody tr）都设为display: contents，让th/td直接成为 grid item，共享同一套列轨道 - 给
tbody加overflow-y: auto并设固定高度，滚动时th和td始终共用同一列宽
兼容性与性能提醒
minmax(0, 1fr) 在 IE 完全不支持，Edge 16+ 支持，现代 Chrome/Firefox/Safari 均无问题。若需兼容 IE，只能退回到 table 布局或 JS 计算列宽（如监听 resize 后同步 offsetWidth）。
- 大量行数（>1000）下，纯 CSS Grid 滚动性能优于 JS 方案，但需避免在
grid-template-columns中写死过多列（如 50 列），应动态生成 CSS 字符串或用repeat() - 不要给每个
td设width: 0或flex-basis，Grid 下这些属性被忽略
真正卡住的往往不是怎么写，而是没意识到 fr 默认尊重内容最小尺寸——这个隐含规则比语法本身更影响结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
