Grid子元素尺寸不一致是默认行为，需通过grid-template-rows/columns明确轨道尺寸、控制子项内部溢出、统一align-items/justify-items对齐方式，并设置grid-auto-rows/columns规范隐式轨道。
Grid 子元素尺寸不一致，通常不是“出错了”，而是默认行为——Grid 容器本身不会强制子项等高或等宽，它只按你定义的轨道（rows/columns）分配空间。真正起作用的是 grid-template-rows 和 grid-template-columns 的设置方式，以及子项自身的尺寸逻辑（如内容撑开、min/max 约束、对齐方式等）。
明确轨道尺寸：用固定值或 fr 单位统一行高/列宽
如果希望所有行高一致，别依赖内容自动撑开，直接写死或用 fr：
-
grid-template-rows: repeat(3, 100px);→ 3 行，每行严格 100px -
grid-template-rows: repeat(3, 1fr);→ 3 行均分可用高度（容器高度需明确，否则可能塌陷） - 列同理：
grid-template-columns: repeat(4, 1fr);让 4 列等宽
防止内容撑破网格轨道：控制子项内部行为
即使轨道设好了，子项里一张大图、一段长文字或 display: flex 容器仍可能溢出或拉伸轨道。可加这些限制：
- 给子项设
overflow: hidden;或text-overflow: ellipsis;防文字撑宽 - 图片用
img { max-width: 100%; height: auto; }保持比例不突破格子 - 避免子项设置
height: 100vh或绝对定位脱离文档流
用 align-items / justify-items 统一子项对齐方式
尺寸“看起来”不一致，有时只是子项在格子内对齐方式不同（比如有的顶部对齐、有的居中、有的底部贴齐）。统一它们的对齐能提升视觉一致性：
-
align-items: stretch;（默认）→ 子项拉伸填满整行高（最常用，让高度“视觉一致”） -
justify-items: stretch;→ 同理，让子项拉伸填满整列宽 - 若不想拉伸，改用
center或start，但要确保所有子项行为一致
检查隐式网格与显式轨道的冲突
当子项数量超过 grid-template-rows/columns 定义的数量时，Grid 会创建隐式轨道（implicit grid），其默认尺寸是 auto，容易导致高度参差。解决方法：
- 用
grid-auto-rows: 100px;或grid-auto-rows: 1fr;统一隐式行高 - 同理，
grid-auto-columns: 1fr;控制隐式列宽 - 或者干脆预设足够多的轨道：
repeat(auto-fit, minmax(200px, 1fr)))更灵活且可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
