Grid替代table布局需清空display: table类样式，用grid-template-areas实现语义化区域划分，配合max-height/overflow-y模拟表头固定，并按断点重定义布局字符串。
Grid替代table布局时，display: table类样式必须清空
旧表格布局常依赖display: table、display: table-row等声明，直接套用Grid会冲突——浏览器按显示类型分层渲染，Grid容器不会继承table的盒模型行为。不清理这些，grid-template-columns可能完全失效。
- 检查所有涉及
tr、td、th的CSS规则，删掉或覆盖display值 - 给新Grid容器显式设
display: grid，别依赖父级继承 - 若用CSS重置库（如Normalize），确认它没悄悄给
table元素加display: table
grid-template-areas比grid-template-columns更适合语义化表格结构
老旧表格往往有明确区域划分：标题栏、操作列、数据列、状态标签列。用grid-template-areas能直观映射HTML结构，避免靠grid-column手动计算位置，也方便后期增减列。
- 每行用引号包裹区域名，空格分隔列，换行分隔行，例如：
"header header header" - 对应子元素用
grid-area: header绑定，名字要严格一致（区分大小写） - 合并多列用重复区域名，如
"footer footer footer"；跨行用同一名字在多行出现 - 注意：IE11不支持
grid-template-areas，如需兼容，改用grid-column-start/grid-column-end
表头固定、内容滚动时，overflow: auto和grid-auto-rows配合很关键
原表格常用<thead>+<tbody>实现表头冻结，Grid里没有内置语义，得靠容器高度+溢出控制+行高策略模拟。
- 给Grid容器设
max-height和overflow-y: auto，但overflow只对块级容器生效，确保父级没display: inline - 表头行用
grid-row: 1固定位置，内容行用grid-auto-rows: minmax(40px, auto)防高度塌陷 - 避免对滚动区子项设
height: 100%，Grid中高度计算优先级复杂，容易撑破容器 - 滚动条宽度会影响列宽计算，建议用
scrollbar-gutter: stable预留空间（Chrome 94+）
响应式列数切换时，@media内重定义grid-template-areas比改grid-template-columns更稳
移动端常把多列表格压成单列（如“姓名/电话/地址”变成三行堆叠），用grid-template-areas可为不同断点写不同布局字符串，逻辑清晰且不易漏项。
立即学习“前端免费学习笔记（深入）”；
- 桌面端：
"name phone email"；移动端："name"<br>"phone"<br>"email"
- 每个
@media块内完整重写grid-template-areas，不要试图用grid-area单独覆盖某一项 - 区域名保持一致，否则JS通过
getComputedStyle读取时会返回none - 注意：Safari旧版对多行
grid-template-areas字符串解析不稳定，建议单行书写并用\续行（实际无效），稳妥做法是拆成多个@media规则
Grid重写表格最难的不是语法，而是放弃“行”和“列”的思维惯性——你得先想清楚哪些内容属于同一逻辑区块，再决定怎么切网格区域。很多失败案例，都是因为强行把tr当grid-row、td当grid-column去一一对应，结果一加响应式就全乱。
