grid-template-areas 不能让按钮等高，真正起作用的是 grid-auto-rows：需配合 display: grid、grid-template-columns 和 grid-auto-flow 使用，设 grid-auto-rows: 1fr 使隐式行等高；按钮需 min-height: 100% 或父项设 flex 居中；ie11 不支持需 fallback；gap 影响可用高度需考虑。
grid-template-areas 不能直接让按钮等高，得靠 grid-auto-rows
九宫格常见误区是用 grid-template-areas 定义九个区域再逐个放按钮，但这样每个 div 是独立块级元素，高度由内容决定，按钮文字长短不一时就会参差不齐。真正起作用的是 grid-auto-rows —— 它控制所有隐式行轨道的高度，而九宫格若用 grid-template-columns: repeat(3, 1fr) + grid-auto-flow: row，就天然生成三行三列的隐式网格，此时设置 grid-auto-rows: 1fr 才能让每行等高，进而让所有按钮容器高度一致。
实操建议：
- 避免写死九个
grid-area名称，除非需要错位或跨区；多数九宫格用自动流向更简洁 -
grid-auto-rows: 1fr必须配合display: grid和至少一个grid-template-columns才生效，单独设无效 - 如果按钮内有图标+文字，记得给按钮统一设置
height: 100%和display: flex居中，否则内容会贴顶
按钮本身不继承 grid 行高，需显式设 min-height 或 align-items
即使父容器每行都是 1fr，按钮默认是 inline 或 inline-block，不会撑满整行高度。常见错误是只设父级 grid-auto-rows 就以为完事，结果按钮还是矮一截。
实操建议：
- 给按钮加
min-height: 100%，并确保其父容器（即 grid item）没有 padding 挤压可用高度 - 更稳妥做法：在 grid item 上设
display: flex; align-items: center; justify-content: center，按钮作为子元素自然居中且高度随容器伸缩 - 若按钮含 SVG 图标，注意
vertical-align: middle可能干扰对齐，优先用 flex
IE11 不支持 1fr 在 grid-auto-rows 中，需 fallback 到固定高度或 JS 计算
IE11 对 grid-auto-rows: 1fr 完全不识别，会退化为单行或高度塌陷。这不是 bug，是规范不支持 —— 它只认 grid-template-rows 里的 1fr，且必须显式声明三行。
实操建议：
- 兼容 IE11 时，改用
grid-template-rows: repeat(3, 33.333%)，配合grid-template-columns: repeat(3, 1fr) - 若内容动态增减，CSS fallback 失效，就得用 JS 监听容器高度后手动设按钮
min-height - 现代项目可忽略 IE，但若用 PostCSS autoprefixer，它不会为
grid-auto-rows: 1fr加前缀，这点要心里有数
gap 值影响实际可用高度，计算等高时得减去 gap 总和
比如容器高 600px，设 grid-row-gap: 12px，三行之间有两处间隙，总 gap 占 24px，那么三行实际可分配高度只有 576px，每行约 192px。如果忽略这点，硬写 grid-auto-rows: 200px，最后一行会被截断或溢出。
实操建议：
- 用
calc()算精确值：grid-auto-rows: calc((100% - 2 * 12px) / 3)（假设 gap=12px） - 更推荐用
grid-auto-rows: 1fr+grid-row-gap组合，浏览器自动扣除 gap，无需手算 - 注意
gap在 Firefox 旧版本中叫grid-row-gap/grid-column-gap，现在统一用gap即可
九宫格等高真正的关键不在“怎么排”，而在“谁负责撑高”——grid 容器决定行高，grid item 决定内容如何填满，按钮只是被动元素。漏掉任一环，高度就错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
