应优先按需分配而非均分：固定高区域用px/rem，内容驱动区域用minmax()，避免fr单位撑开行；慎用dense以防破坏可访问性；gap与justify/align-content作用不同，前者控项间空隙，后者管多余空间；IE下用@supports降级并确保DOM线性顺序。
grid-template-rows 和 grid-template-columns 怎么设才不踩坑
直接写 fr 单位看似灵活，但遇到内容高度不一致的多行项目时，容易让某一行被撑开、破坏整体节奏。关键不是“均分”，而是“按需分配”。
- 固定高区域（如标题栏）用
px或rem，比如grid-template-rows: 60px 1fr 80px - 内容驱动的行/列优先用
minmax(min, max)，例如grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))))—— 这样既能响应式换行，又不会把卡片压得太窄 - 避免在
grid-template-areas中混用span与隐式网格线，容易导致命名区域错位
grid-auto-flow: row vs dense 的真实影响
grid-auto-flow: row 是默认值，按顺序逐行填；grid-auto-flow: dense 会回填空缺，但可能打乱 DOM 顺序 —— 对可访问性（如屏幕阅读器）和键盘 Tab 流有实际影响。
- 做仪表盘类布局（卡片位置固定、无语义顺序要求）可用
dense，提升空间利用率 - 做文章列表、商品流等有阅读流的场景，必须保持
row，否则order或grid-area调整后，视觉顺序和焦点顺序会不一致 -
grid-auto-flow: column很少用，除非明确要做瀑布流式垂直排列（且容器高度受限）
多行多列下 gap 和 justify-content / align-content 的优先级关系
gap 控制的是网格项之间的空隙，它不作用于网格容器边缘；而 justify-content（水平）和 align-content（垂直）只在网格轨道总尺寸小于容器时才生效 —— 换句话说，它们管的是“多余空间”，不是“间隙”。
- 如果设置了
grid-template-columns: repeat(3, 1fr)且容器足够宽，justify-content: center不起作用 - 想让三列居中且带边距？改用
padding+gap，或用margin: 0 auto包一层 wrapper -
gap支持单独设row-gap和column-gap，在响应式中更可控，比如移动端只设row-gap: 16px
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))));
gap: 12px;
padding: 12px;
}
.grid > * {
min-height: 120px;
background: #f5f5f5;
}IE 兼容场景下 grid 布局怎么保底
CSS Grid 在 IE10–11 中仅支持旧语法（display: -ms-grid），且不支持 gap、auto-fit、minmax() 等现代特性。强行降级写两套样式成本高，不如策略性降级。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (display: grid)包裹现代 Grid 样式，IE 自动跳过 - 对基础多列需求，用
float或inline-block+calc()实现三栏，再用nth-child清除浮动 - 关键点：不要依赖
grid-area做内容重排，IE 下这部分内容会塌成一列，应确保线性 DOM 结构本身就有合理阅读顺序
真正难的不是写出一个能跑的 grid，而是判断哪些地方该用 minmax()、哪些该交由 grid-auto-rows 动态生成、以及什么时候必须放弃 auto-fit 改用手动 repeat(4, 1fr) 来锁定列数——这些取舍藏在具体容器宽度、内容长度和交互反馈里，没法靠一套模板解决。
