推荐用 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 是否被压缩