grid-auto-rows + minmax() 是最可控的行高统一方案：它从容器层面定义每行最小高度（如100px）和弹性上限（auto），确保底边对齐又不截断内容；需配合 align-items 控制项目内垂直对齐，并避免 grid-template-rows 冲突及跨行项目干扰。
grid-auto-rows + minmax() 是最可控的行高统一方案
Grid 容器里项目高度不一致，本质是行轨道没被主动约束。靠子项自身 height 或 min-height 拉伸，只会让各行高度越拉越散。正确做法是从容器层面定义行高行为：grid-auto-rows: minmax(100px, auto) —— 这表示每行至少 100px 高，内容多时可自然增高，但不会被压缩。
常见错误是只写 grid-auto-rows: 100px，结果长文本溢出或被截断；或者漏掉 minmax() 直接用 auto，导致行高完全由内容决定，失去控制力。
-
minmax(120px, 1fr)：适合响应式卡片，最小高度保底，大屏下可弹性撑开 -
minmax(120px, 120px)或120px：强制等高，适用于已知内容高度上限的场景 - 若已显式定义了
grid-template-rows（如100px 200px），grid-auto-rows只影响后续隐式生成的行，此时应改用repeat()重构整行定义
align-items 控制项目内垂直对齐，不是可选项
仅设行高还不够。当项目内文字行数不同、图标尺寸不一，align-items 的默认值 stretch 会强行拉伸所有项目填满整行，反而放大错位感——比如一个只有标题的卡片被拉得比含三段文字的还高。
实际中该根据内容类型选值：
-
align-items: start：顶部对齐，适合纯标题、按钮类短内容，视觉基准线一致 -
align-items: center：居中对齐，适合图标+文字组合的卡片，避免图标“浮”在上方 - 避免
stretch，除非你明确需要所有项目高度一致且能接受文字行高被拉伸变形
align-content 仅在多行+有剩余空间时生效
align-content 不是对齐单个项目，而是控制「多行网格轨道」在容器交叉轴（垂直方向）的整体分布。它只在两个条件同时满足时才起作用：容器有固定高度（如 height: 500px），且内容生成了多行、但总高度未占满容器。
典型误用是给自适应高度容器加 align-content: center，结果毫无反应——因为没有“剩余空间”可分配。
-
align-content: center：多行整体垂直居中，适合模态框内卡片列表 -
align-content: space-between：首行贴顶、末行贴底、中间等距，适合仪表盘布局 - 若只需单行内对齐，请用
align-items，别混用
跨行项目会破坏自动对齐，需显式控制行结束位置
当某个项目设置 grid-row: span 2，它会跨越两行轨道。如果其他项目高度不一，又没限制其所在行的结束位置，Grid 会按内容撑开后续行高，导致相邻列底部错乱。
解决方法很直接：为跨行项目显式声明 grid-row-end，并确保同列其他项目不意外干扰该行轨道。
- 例如左侧项目跨两行，右侧两个项目想紧贴顶部堆叠，就该给右侧第一个项目设
grid-row: 1，第二个设grid-row: 2，而非依赖隐式定位 - 避免在同列混用
span和无grid-row声明的项目，容易触发不可预测的行高计算 - 调试时可用浏览器开发者工具勾选“显示网格线”，直观查看每行轨道是否被跨行项目意外拉伸
真正难的不是写对某一行 CSS，而是理解 grid-auto-rows 管的是“轨道”，align-items 管的是“单元格内内容”，而 align-content 管的是“多轨道整体”。三者作用域不同，但常被当成同一类对齐问题去试错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
