fr是剩余空间分配器而非等分比例，需先扣除固定尺寸（如px）和minmax()最小值，再分配剩余空间；grid-template-areas配合fr定义语义区块更稳定可维护。
fr单位在后台面板里不是“等分”，而是“扣完再分”
写 grid-template-columns: 1fr 2fr 不等于左边占 1/3、右边占 2/3——它只在“没其他尺寸干扰”的前提下才成立。后台面板常见固定区域（如侧边栏）会先占掉显式宽度，fr 才去分剩下的空间。
比如 grid-template-columns: 240px 1fr 320px：240px 和 320px 先被扣除，剩余宽度全归 1fr；若写成 240px minmax(320px, 1fr)，则右侧最小 320px，超出部分才和中间的 1fr 协商分配。
- 别把
fr当比例尺用，它是剩余空间分配器 - 固定宽（
px）、弹性约束（minmax()）、fr混用时，顺序不重要，但浏览器计算优先级是：固定尺寸 >minmax()最小值 >fr分配 - 如果主内容区文字撑开导致布局错位，大概率是忘了给子元素设
max-width: 100%或overflow-wrap: break-word
grid-template-areas + fr 组合才是后台骨架的正确打开方式
用 grid-template-areas 定义语义区块（如 "header header" "nav main" "footer footer"），再配合 fr 控制各区域实际尺寸，比纯数字线定位更稳、易读、可维护。
关键点在于：命名区域必须和子元素的 grid-area 值**完全一致**（包括大小写、空格、引号），且父容器必须有 display: grid，否则整个声明无效。
-
grid-template-areas中的.表示空单元格，不能留空格代替 - 跨行区域（如侧边栏从顶到底）要写成
"nav nav" "nav nav"这样多行重复，不能靠grid-row: 1 / -1混用 - IE11 不支持
grid-template-areas，需要 fallback 时，改用grid-column: 1 / 2; grid-row: 1 / 4手动定位
auto-fit + minmax() 在后台面板中容易失效的三个地方
后台常需“菜单固定、主区自适应、工具栏弹性”，此时 repeat(auto-fit, minmax()) 并不适合——它面向卡片流，不是区域划分。强行套用会导致列数错乱、区域错位。
- 父容器被外层
flex或max-width限制宽度，auto-fit失去计算依据 - 子项设置了
width: 300px或min-width: 200px，直接压垮minmax()的弹性逻辑 - 用了
gap但没检查是否和子项margin叠加，造成实际间距翻倍，窄屏下直接挤掉一列
移动端单列堆叠时，fr 为什么还显示两栏？
这不是 fr 的问题，而是响应式触发条件没对上。后台面板通常需要明确断点切换结构（比如从三栏 → 两栏 → 单栏），不能依赖 auto-fit 自动降级。
- 漏了
<meta name="viewport" content="width=device-width, initial-scale=1">，移动端按桌面视口渲染 - 媒体查询写了
@media (max-width: 768px)，但实际设备宽度因缩放或 UA 差异落在临界点附近，建议用max-width: 767.98px避免边界卡顿 - 写了
grid-template-columns: 240px 1fr却没在断点里改成1fr，导致侧边栏仍占 240px，主区被压缩到几乎不可见
真正难的是判断什么时候该用 minmax() + fr，什么时候该切回 @media 重定义整个 grid-template-areas——前者管伸缩，后者管结构。混淆这两层，布局就容易在某个屏幕宽度上突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
