align-items 作用于 grid 容器的直接子元素（网格项），控制其在交叉轴上的对齐方式；它不穿透嵌套容器，且效果取决于当前网格的轨道定义和自动流方向。
align-items 在 grid 容器上到底对谁起作用
align-items 控制的是**网格项（grid items）在交叉轴（cross axis）上的对齐方式**，但它只对直接子元素生效——也就是那些直属于该 display: grid 容器的元素。如果某个子元素自己又是 grid 或 flex 容器，align-items 不会穿透进去影响它的子项。
常见错误现象：align-items: center 写了但内容没居中，往往是因为目标元素被多包了一层 div，而你调的是外层容器的 align-items，内层内容完全不受影响。
- 使用场景：单行/单列布局中让所有项目在垂直方向统一居中、拉伸或对齐顶部/底部
- 注意：它不控制网格轨道（grid tracks）本身的位置，也不影响
justify-items管理的行内轴（inline axis） - 兼容性：Chrome 57+、Firefox 52+、Safari 10.1+ 均支持；IE 完全不支持，别在需要兼容 IE 的项目里指望它
align-items: stretch 是默认值，但经常“失效”
很多人以为设置了 align-items: stretch 就一定能撑满高度，结果发现某些项还是“塌陷”了。根本原因是：stretch 只在项没有显式设置交叉轴尺寸（如 height、min-height、max-height）时才生效。
常见错误现象：一个 div 里面只有文字，放在 grid 里却没填满行高，看着上下留白；或者用了 img 标签，高度被图片原始尺寸锁死。
- 解决办法：给该项加
height: 100%或min-height: 0（后者常用于打破 flex/grid 的最小尺寸限制） - 特别注意
img：默认是vertical-align: baseline，且自带内在尺寸，需额外设height: 100%+object-fit: cover才可控 - 性能影响：频繁用
height: 100%可能触发重排，尤其嵌套深时；优先考虑用align-items: stretch配合合理的内容流结构
响应式中 align-items 要配合 grid-template-rows 动态调整
单纯靠 align-items 无法解决“小屏幕下单行变多行后对齐错乱”的问题。因为交叉轴方向会随 grid-template-rows 和 grid-auto-rows 改变——横向布局时交叉轴是垂直方向，纵向布局时交叉轴就变成水平方向了。
使用场景：移动端从 column 改为 row 布局，或者用 @media 切换 grid-template-columns 数量时，align-items 的效果可能和预期相反。
- 关键点：
align-items的作用方向始终由当前 grid 的grid-auto-flow和显式轨道定义决定，不是固定“垂直对齐” - 实操建议：在媒体查询里同步重设
align-items，比如 desktop 用align-items: center（垂直居中），mobile 改成align-items: start（避免横排时文字被挤出） - 容易踩的坑：用
grid-template-areas布局时，区域高度不一致会导致align-items表现不可预测，建议搭配grid-auto-rows: minmax(100px, auto)约束基础高度
align-items 和 place-items 的关系别搞混
place-items 是 align-items 和 justify-items 的简写，格式是 place-items: [align] [justify]，比如 place-items: center stretch。但它**不能替代 align-items 单独使用的语义场景**。
常见错误现象：写了 place-items: center，结果所有项在两个方向都居中了，而你其实只想垂直居中、水平左对齐。
- 参数差异：
place-items: center等价于align-items: center; justify-items: center；想只控制一个方向，必须用单独属性 - 兼容性略低：
place-items在 Safari 12.1+ 才稳定支持，旧版 Safari 会静默忽略，导致回退到浏览器默认对齐（通常是 stretch） - 调试技巧：用 DevTools 检查 computed 样式时，看到
place-items被解析成两个独立属性，说明生效了；如果只看到一个，大概率是浏览器不支持或语法写错了
真正难的不是写对 align-items，而是判断当前 grid 的交叉轴方向是否和你想的一致——尤其在自动流（grid-auto-flow: column）或隐式网格中，这个方向很容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
