讲解
Flexbox 管一维（一行或一列），Grid 管二维（行和列同时规划）。给容器设 display: grid，然后用 grid-template-columns 和 grid-template-rows 显式定义轨道：grid-template-columns: 200px 1fr 2fr 表示三列，分别是定宽 200px、剩余空间的 1 份和 2 份。fr 是 Grid 的灵魂单位，按份数瓜分「剩余空间」，混合定宽与弹性列时比百分比好用得多。gap 设置行列间距（可拆 row-gap/column-gap）。
写多列重复轨道用 repeat() 简写：repeat(4, 1fr) 四等分。响应式卡片墙的神器组合是 repeat(auto-fill, minmax(200px, 1fr))——每列至少 200px、足够时均分，auto-fill 让浏览器自动算出能放几列，一行媒体查询都不用写。auto-fill 和兄弟 auto-fit 的区别在列数不足时：auto-fill 保留空轨道（剩余空间留白），auto-fit 把空轨道坍缩为 0（现有项目拉伸占满），卡片墙通常要 auto-fit。
项目定位用 grid-column: 1 / 3（跨第 1 到第 3 条网格线，即占两列）或 grid-column: span 2（跨两格）；未显式放置的项目按「自动放置」规则顺序填坑，可用 grid-auto-flow: dense 让后来的小项回填前面的空缺。显式轨道之外多出的内容进入「隐式轨道」，尺寸由 grid-auto-rows 控制。容器级对齐有 justify-items/align-items（项在格子内）和 justify-content/align-content（整个网格在容器内）。选择标准：一排元素的对齐分配用 Flex，整张页面的行列结构用 Grid，两者经常嵌套混用。
示例
/* 三列布局：固定侧栏 + 弹性主区 */
.layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 24px;
}
/* 响应式卡片墙：不用媒体查询 */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
/* 跨行跨列的特色区块 */
.dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 120px;
gap: 12px;
}
.dashboard .featured {
grid-column: span 2; /* 占两列 */
grid-row: span 2; /* 占两行 */
}
常见坑
- fr 与 % 混用出错：fr 分的是「剩余空间」（先扣掉定宽列和 gap），% 相对容器总宽；grid-template-columns: 50% 50% 再加 gap 就会溢出，等分请用 fr。
- auto-fill 与 auto-fit 选错：想要「项目少时拉伸占满」用 auto-fit，想要「保持列宽一致、不足留空」用 auto-fill，记反了卡片墙表现会很怪。
- 隐式轨道尺寸失控：grid-auto-rows 没设置时，多出的行高由内容决定，网格忽高忽低。显式给出 grid-auto-rows 或 minmax 下限。
- span 超出显式列数：grid-column: span 3 在只有两列的容器里会撑出隐式列破坏对齐，span 值别超过模板列数。
- 拿 Grid 硬做一维布局：一排等宽按钮用 Grid 也能写，但 Flex 的语义更贴切；反过来二维卡片矩阵用 Flex 换行会很痛苦——按维度选工具。
小结
Grid 用 grid-template-columns/rows 定义二维轨道，fr 分配剩余空间，repeat + auto-fit + minmax 写响应式网格，span 跨格。下一章看 Grid 最具可读性的用法：命名网格区域。