fr单位按剩余空间比例分配而非平均分，内容撑开列会导致不均等；强制平铺需用overflow隐藏或repeat(auto-fill,minmax())；勿混用grid与table-layout；dense模式易致错位，慎用；固定表头需拆容器+sticky+subgrid。
grid-template-columns 用 fr 单位时为什么列宽不均等
fr 单位不是“平均分”，而是按剩余空间比例分配。如果某列设置了 minmax(100px, 1fr)，而内容撑开了它（比如放了长文本或图片），那它就会超出“均等”预期，其他列被迫压缩。
- 只在所有列都未被内容撑开时，
1fr 1fr 1fr才真均分 - 想强制平铺且不被内容撑破，得加
overflow: hidden或text-overflow: ellipsis配合white-space: nowrap - 更稳妥的做法是用
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))))—— 它会自动计算能塞几列，每列至少 200px，多余空间再均分
table-layout: fixed 和 display: grid 混用会怎样
别混。CSS Grid 是布局模型，table-layout: fixed 是传统表格渲染规则，两者底层机制冲突。一旦给 <table> 加了 <code>display: grid，它就不再是语义化表格，colgroup、rowspan 全失效，辅助工具也读不到结构。
- 真要平铺对齐，直接用
<div> + <code>display: grid，别套<table> <li>如果必须保留表格语义（比如数据可访问性要求高），改用 <code>table-layout: fixed+ 显式设width和col宽度，但对齐能力弱，无法响应式重排 - 常见翻车点：开发者想“快速迁移旧表格”，给
<tr> 加 <code>display: contents再套 grid，结果屏幕阅读器跳过整行grid-auto-flow: dense 导致单元格错位怎么办
grid-auto-flow: dense会让 Grid 尝试填满空缺，但前提是单元格没设grid-row或grid-column。一旦你手动指定了某个单元格跨行（比如grid-row: 1 / 3），dense 模式可能把后续项塞进它下方的缝隙里，视觉上就“跳行”了。- 平铺式布局通常不需要 dense，删掉这行最安全
- 如果确实要节省垂直空间（比如卡片流），优先用
grid-template-rows: masonry（仅 Firefox 支持）或 JS 库（如 Masonry），别依赖 dense 做布局逻辑 - 调试时打开浏览器开发者工具的 Grid overlay，勾选 “Show line numbers”，一眼能看出哪些轨道被意外复用
用 grid-area 命名区域后，怎么让表头固定在顶部
Grid 本身不提供“冻结表头”能力，
grid-area只是命名位置，滚动时整个网格一起动。要固定表头，得拆成两个独立 Grid 容器：一个只放表头，设position: sticky；另一个放数据体，设overflow-y: auto。- 表头容器用
grid-template-columns: subgrid（需父容器设display: grid并定义列），保证列宽完全对齐 - 不支持
subgrid的老浏览器（如 Safari 15.6 之前），得用 JS 同步列宽，或退回到table+position: sticky - 别给整个表格容器加
overflow，否则 sticky 失效 —— sticky 的参照物是最近的带滚动的祖先，不是 grid 容器本身
平铺对齐看着简单，但 grid-column-gap、文字换行、内联元素基线、甚至字体渲染差异都会悄悄破坏对齐。调的时候先关掉所有 padding/margin，用 outline 看真实格子边界，比猜强得多。
