grid-template-areas 是 saas 后台筛选区+表格区最稳妥的组织方式，但必须配合 height: 100vh 和 overflow-y: auto 才能避免双滚动条；单纯用 grid-template-columns 容易让筛选栏被内容撑开或表格溢出。
直接说结论：grid-template-areas 是 SaaS 后台筛选区 + 表格区最稳妥的组织方式，但必须配合 height: 100vh 和 overflow-y: auto 才能避免双滚动条；单纯用 grid-template-columns 容易让筛选栏被内容撑开或表格溢出。
为什么筛选区+表格区不能只靠 grid-template-columns
很多人写成 grid-template-columns: 240px 1fr，结果发现：筛选区高度随表单字段变长、表格区横向滚动条压住筛选栏、或者整个页面出现两套滚动（外层页面滚 + 表格内部滚）。根本原因是列宽定义不约束行高，而筛选区通常含多个 label+input 堆叠，高度不可控。
-
grid-template-columns只管“列怎么分”，不管“行有多高”——筛选区若没设max-height或overflow，它会一路向下撑 - 表格区若用
display: grid模拟，子项又没设min-width: 0，内部文字/按钮会强行撑宽整列，导致水平溢出 - 没有区域命名时，响应式断点切换（比如移动端收起筛选栏）就得重写所有
grid-column，维护成本陡增
grid-template-areas 必须配 display: grid + 显式高度
后台容器（如 .app-main）必须同时满足三项，否则区域声明完全无效：
- 父容器设
display: grid—— 子元素自己加没用 - 设
height: 100vh或从 React/Vue 父组件传入固定高度（仅height: 100%不生效，因上级可能无高度） -
grid-template-areas每行引号内单词数一致，例如："filter table"<br>"filter table"<br>"filter table"
（三行都两词），不能第二行突然变成"filter ."
对应子元素必须手动写 grid-area: filter 和 grid-area: table，class 名叫 .filter-panel 不会自动映射。
表格区滚动失控？检查 overflow 和 min-height
SaaS 表格常含长文本、操作按钮、状态标签，极易触发双滚动。关键修复点不在表格本身，而在它的直接父容器（即 grid-area: table 对应的元素）：
- 必须设
overflow-y: auto—— 单写overflow: auto可能引发横向滚动，破坏筛选栏宽度 - 若表格内部还嵌了 Grid/Flex（比如每行用
display: grid布局单元格），其直系子容器（即每行.table-row）要加min-height: 0，否则弹性项会拒绝收缩，把父容器顶高 - IE11 不支持
1fr在grid-template-rows中，可用grid-template-rows: 60px calc(100vh - 60px)替代，注意calc()内-两侧必须有空格
筛选区折叠后表格占满全宽？媒体查询要同步更新 areas
移动端常需隐藏筛选区，让表格独占一行。这时不能只改 grid-template-columns，必须同步动 grid-template-areas：
- PC 端：
grid-template-areas: "filter table" - 移动端：
@media (max-width: 768px) { grid-template-areas: "table"; }—— 注意这里只有一行一词，不是"table table" - 对应筛选区元素要加
display: none，否则即使grid-area值还在模板里，它仍占位（CSS Grid 不会自动跳过隐藏元素）
区域名匹配是逐字符敏感的：grid-area: "filter"（带引号）会失效，必须是 grid-area: filter；大小写错、多空格（filter ）、含中划线（filter-panel）都会断开绑定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
