Grid 与 Flex 的分工：Grid 先定「页面分成几格」，Flex 只管「一行/一列里怎么排」

① grid-template-columns：用空格分隔的轨道列表

1fr
1fr
1fr
200px 固定
1fr
1fr
repeat(4,1fr)
A
B
C
/* fr = 剩余空间的等份，只在 grid-template-* 里可用 */
grid-template-columns: 1fr 2fr;          /* 第二列是第一列的两倍 */
grid-template-columns: repeat(12, 1fr);  /* 12 栏栅格底 */
grid-template-columns: repeat(3, minmax(0, 1fr));  /* 常见防御写法，见 11b */
grid-template-columns: [侧栏] 240px [主区] 1fr;    /* 给轨道命名，用 grid-column: 侧栏 定位 */

② 行也一样：显式行 + 隐式行

40px 行
1fr 行
40px 行
多余内容进入隐式行

grid-template-* 只描述你写明的轨道；超出的部分由 grid-auto-rows/grid-auto-columns 决定尺寸，方向由 grid-auto-flow（row / column / dense）控制。

③ 命名区域：把布局写成 ASCII 图

header
nav
main —— 长文放这里
aside
footer
.page {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr) 232px;
  grid-template-areas: "nav main aside";
}
header { grid-area: nav; }   /* 子项按名字落位，DOM 顺序可以与视觉顺序不同 */

区域名组成的矩形必须完整（不能有 L 形空洞），否则整条声明失效。用 . 表示空格子。响应式换布局只需重写 grid-template-areas，HTML 一行不动 —— 这是它比 Flex 更适合「整页骨架」的原因。

④ gap：只写一次，不用减宽度

gap:16px
A
B
C

Grid 的 gap 只作用于轨道之间，四周不留额外空白，因此 1fr 已经自动扣掉了间距 —— 不需要再算 calc(33.333% - 11px)。

⑤ 对齐：grid 的三套属性

place-items:center
整格居中
一行代码
align-items:end
高格子
底对齐
A
B
C
D
E
F
属性管什么
justify-items / align-items格子内部内容在水平/垂直方向的位置
place-items上面两个的简写（place-items: center = 完全居中）
justify-content / align-content整个网格轨道在容器里的分布（有剩余空间才看得出）
justify-self / align-self单个子项叛逆一次

⑥ 自动排布与 dense

1
2
3
4 → 自动进入第二行
5
dense：后面的小项可以回填前面留下的空洞
B
C
D
E

grid-auto-flow: dense 会打乱阅读顺序（视觉顺序 ≠ DOM 顺序），只适合图片墙一类非线性内容。

最小可用配方

/* 等宽三列 + 间距 */      .g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* 侧栏 + 流式主区 */      .g { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
/* 完美居中 */             .c { display: grid; place-items: center; }
/* 整页骨架 */             见 11b 与 HTML 教程第九章