fr单位按剩余可用空间依比例分配，如1fr 2fr 1fr即按1:2:1分割；禁混用fr与%或px；minmax(300px,1fr)可设列宽范围；grid-template-areas需同步定义rows/columns；dense会打乱视觉顺序影响可访问性；IE不支持gap须用padding/margin降级。
Grid布局里fr单位到底怎么算？
它不是固定像素，也不是百分比，而是“剩余可用空间的等分份额”。比如grid-template-columns: 1fr 2fr 1fr，把容器宽度减去所有固定尺寸（如gap、显式设置的px/rem列）后，按1:2:1比例分配。
常见错误是混用fr和%：比如写成1fr 50%，这时浏览器会先按%占满父容器50%，再把剩下空间给fr——结果往往列宽失控。应统一用fr或明确用minmax()约束。
- 避免在
grid-template-columns中混用fr与%或px（除非你清楚剩余空间如何被二次计算） - 想让某列最小300px、最大占满剩余空间？用
minmax(300px, 1fr) -
fr不响应文字内容撑开，只响应容器尺寸；内容溢出需靠overflow或word-break单独处理
用@media切换grid-template-areas时为什么没生效？
因为grid-template-areas必须和grid-template-rows、grid-template-columns配套定义，缺一不可。只改areas，其他两个仍沿用默认值（即单行单列），布局就塌了。
典型场景是移动端把侧边栏从"header sidebar main footer"改成"header" "main" "sidebar" "footer"，这时必须同步调整rows和columns：
/* 移动端 */
@media (max-width: 768px) {
.layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-rows: auto 1fr auto auto;
grid-template-columns: 1fr;
}
}
- 每次修改
grid-template-areas，务必检查grid-template-rows和grid-template-columns是否匹配行数/列数 - 别依赖继承——
grid-template-areas在媒体查询里必须完整重写，不能只写新增部分 - 用
grid-area给子元素命名时，名字要和areas里的字符串完全一致（包括引号、空格、换行）
grid-auto-flow: dense能自动填空，但为什么内容顺序乱了？
dense会让Grid尝试用后续项目填补前面留下的空白，但它不改变DOM顺序，只改变视觉排列。如果项目设置了grid-row/grid-column且跨度大（比如span 2），又没预留足够空间，dense就会把后面本该在第二行的项目提前塞进第一行空隙——导致视觉顺序和HTML源码不一致，对可访问性（screen reader）和SEO不利。
- 仅在明确需要“紧凑填充”且不关心语义顺序时启用
dense（比如图片画廊） - 响应式中慎用：同一份HTML在不同断点下
dense行为可能不一致，容易引发错位 - 替代方案：用
grid-template-areas手动规划区域，或靠order属性控制逻辑顺序（但order不影响Grid轨道分配）
为什么gap在IE里完全不生效？
IE10/11根本不支持gap（包括row-gap和column-gap）。即使加了-ms-前缀也无效。这不是兼容性写法问题，是原生缺失。
最稳妥的降级方式是用padding + margin模拟：grid容器设padding，子项设margin，再用calc()抵消首尾多余间隙。但要注意——这会破坏justify-items等居中行为，且无法响应subgrid（IE也不支持）。
- 别试图用Autoprefixer修复
gap：它对IE无作用 - 若必须兼容IE，建议放弃Grid，退回
display: flex+flex-wrap，或用CSS自定义属性+JS动态注入fallback样式 - 现代项目中，优先检测
@supports (display: grid)，再嵌套检测gap支持，而非盲目加前缀
Grid响应式真正难的不是写几行fr或@media，而是当gap、auto-flow、template-areas三者叠加，又穿插内容变化时，视觉、语义、可访问性是否还同步——这里没有银弹，只有反复验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
