grid
定义CSS 网格布局属性，把容器声明为二维网格系统，子项按行列放置
display: grid 把容器变成二维布局系统：行和方向同时可控，这是 flex（一维）做不到的。定义网格用 grid-template-columns / grid-template-rows，子项用 grid-column / grid-row 指定占位。
fr 单位是网格的灵魂，表示「剩余空间的一份」：1fr 1fr 1fr 就是三等分，200px 1fr 是侧栏固定 + 主区自适应，一行代码搞定过去要 float + calc 的布局。
- gap 一次性解决网格间距，不用再 margin 互掐；
- repeat()、minmax()、auto-fill 让响应式网格无需媒体查询；
- grid-template-areas 用ASCII 画布局，可读性极高。
CSS
.page { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "head head" "side main" "foot foot"; gap: 12px; min-height: 100vh; }
⚠ 常见误区
- grid 和 flex 不是二选一：容器用 grid 划分区域，区域内用 flex 排细节
- 子项不指定位置时自动流式填充，别手工给每个 item 写坐标
- IE 不支持 grid，需要兼容旧浏览器时准备 flex 降级