推荐用 fr 单位和 minmax() 写 grid-template-columns/rows，避免像素百分比导致响应断裂；fr 适配弹性空间，minmax(200px,1fr) 保最小宽均分；IE 需 -ms-grid 回退。
grid-template-columns 和 grid-template-rows 怎么写才不踩坑
直接用像素或百分比写列宽，容易在响应式场景下断裂。推荐优先用 fr 单位分配剩余空间，配合 minmax() 控制弹性范围。
-
grid-template-columns: 1fr 2fr表示两列按 1:2 比例均分容器宽度 -
grid-template-columns: repeat(3, minmax(200px, 1fr))创建至少 200px 宽、最多均分的三列，适配缩放 - 避免混用
auto和固定值（如100px auto 100px），auto可能因内容撑开导致意外溢出 - IE 不支持
fr，若需兼容，得用display: -ms-grid回退方案（但已不推荐）
justify-items / align-items 和 justify-content / align-content 区别在哪
前两者控制**网格项（grid item）在单元格内的对齐**，后两者控制**整个网格容器（grid container）在父容器中的对齐及行/列间距**。
-
justify-items: center→ 所有子项水平居中于各自单元格内 -
align-content: space-between→ 当有多行且高度未填满时，各行沿块轴（垂直方向）等距分布 - 单行网格用
justify-content调整整体水平位置，但对align-content无效（因为只有一行） - 如果设置了
grid-auto-rows: 100px但内容超长，align-items: start会让内容从顶部开始溢出，不是裁剪
grid-area 怎么快速定位复杂布局（比如带侧边栏的页面）
用命名区域 + grid-template-areas 是最直观的方式，尤其适合语义化结构（header / main / aside / footer）。
body {
display: grid;
grid-template-areas:
"hd hd hd"
"sd mn mn"
"ft ft ft";
grid-template-rows: 60px 1fr 40px;
grid-template-columns: 200px 1fr 1fr;
}
header { grid-area: hd; }
aside { grid-area: sd; }
main { grid-area: mn; }
footer { grid-area: ft; }
- 每个字符串代表一行，引号内用空格分隔列，相同名称组成一个矩形区域
- 区域名不能含短横线（
main-nav❌），可用下划线（main_nav✅） - 留空用
.占位（如"hd . mn"），但注意.不是“透明”，而是“无区域”——那里不会渲染任何元素 - 区域名大小写敏感，
Header和header是两个不同区域
Grid 布局里 margin 不生效？其实是被自动折叠了
Grid 项之间的 margin 默认不会叠加（不像 Block 流），但**相邻项的外边距也不会合并（collapse）**；真正常见问题是：你设了 margin，却发现没效果——大概率是因为用了 justify-self 或 align-self，它们会覆盖 margin 的对齐作用。
立即学习“前端免费学习笔记（深入）”；
- 在 Grid 中，
margin: auto仍可居中单个子项（水平+垂直），但仅当该方向上有剩余空间时才生效 -
gap属性替代了旧式 margin hack，它只作用于网格轨道之间，不影响子项自身 margin - 若子项内部有浮动元素或绝对定位，其
margin依然起作用，但不会影响 Grid 的轨道计算 - 调试技巧：给
grid-container加outline: 1px solid red，再给子项加background: rgba(0,0,0,0.1)，能快速看清实际占位与 margin 是否被压缩
auto，可能让内容挤成一团。务必用 grid-auto-rows 或 grid-auto-columns 显式约束。 
