1分几列、间隔多宽
这三个属性，撑起了 Grid 八成的作用。
注意看：你把列数从 3 改成 4，格子不会"挤"，而是自动重新分配——因为
每一列都是 1fr，意思是"剩下多少，平均分几份"。
2fr 单位 —— 按比例分，不用算百分比
后台那种「侧栏窄、内容宽」的布局，一行就写完。
/* 侧栏占 1 份，内容占 3 份 */
.layout {
display: grid;
grid-template-columns: 1fr 3fr;
}
为什么不用百分比？因为 25% 75% 还要自己扣掉 gap 的宽度，
算下来经常差几个像素、换行错位。1fr 3fr 由浏览器替你算，永远不会歪。
3auto-fit —— 不写一句媒体查询就自适应
拖动滑杆，模拟屏幕变窄。列数会自己变，全程没有 @media。
900px
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 8px;
}
翻译成人话：「每列最小 160px，能塞几列塞几列，塞不满就让它们把剩余宽度分了。」
窄了就少几列，宽了就多几列——一次写完，所有屏幕都好看。
4span —— 让大件横跨几格
书架上有本厚书，占两个位置。这就是 span。
.big { grid-column: span 2; } /* 横跨 2 列 */
.tall { grid-row: span 2; } /* 竖跨 2 行 */
5还有这几个，记住就够用了
gap
格子之间的缝。只写一个值就是横竖同宽，写两个是「上下 左右」。
gap: 16px gap: 8px 24px
minmax()
规定一个尺寸的上下限。常和 auto-fit 搭配。
minmax(200px, 1fr)
repeat()
懒得写一长串重复值，用它简写。
repeat(3, 1fr) = 1fr 1fr 1fr
grid-template-areas
直接在 CSS 里画出版面图，一眼看懂结构。
这是 Grid 最优雅的功能。
.page {
display: grid;
grid-template-areas:
"head head"
"side main"
"foot foot";
grid-template-columns: 200px 1fr;
gap: 16px;
}
.head { grid-area: head; }
.side { grid-area: side; }
.main { grid-area: main; }
.foot { grid-area: foot; }
看懂了吗？CSS 里那段引号里的字，就是版面本身。
你想调布局，改那几行引号就行——不用再算任何像素。
6Flex 和 Grid，到底用哪个
记住一句话就够了。
| Flexbox | Grid |
|---|
| 维度 | 一维（排队） | 二维（画格子） |
| 谁决定尺寸 | 内容撑开 | 你说了算 |
| 典型用途 | 导航栏、按钮组、水平居中 | 整页布局、卡片墙 |
| 要不要写列数 | 不用 | 要 |
一句话：东西排成一行、谁宽谁窄看内容 → Flex；
你心里已经有一张格纸、要精确摆放 → Grid。
两个能混用：外层 Grid 布局，里层 Flex 排内容，很常见。
7新手最容易踩的 4 个坑
| 现象 | 原因 |
|---|
写了 display:grid 没反应 | 八成写在了子元素上——Grid 要写在父容器 |
| 格子挤在小角落 | 只写了 grid-template-columns，列宽没给 fr |
| gap 没效果 | 拼错了——是 gap，不是 grid-gap（老写法，现在弃用） |
| span 2 之后错位 | 正常。自动排布会找空位，不满意就手动指定 grid-column: 1 / 3 |