align-items没效果，是因为父容器缺乏明确高度或子元素自身禁用了拉伸：父容器height为auto时stretch无高度可分配；子元素设height/min-height/align-self或position:absolute均会关闭stretch行为；需确保父容器有具体高度（如min-height: 100vh）且子元素未声明块轴尺寸约束。
align-items没效果，先看父容器有没有高度
它只在父容器有明确高度时才起作用。如果 .grid-container 的 height 是 auto 或没设任何高度约束，align-items: stretch（默认值）就“无高可拉”——不是失效，而是没参照物。
- 用开发者工具查 computed
height：要是显示auto或0px，问题就在这儿 - 常见补救：加
min-height: 100vh、height: 400px，或确保它被外层 flex/grid 正确撑开（比如加flex: 1） - 别写
height: 100%却忘了祖先元素也没高度——百分比需要上层有具体值才能计算
子元素自己锁死了高度，stretch就让步
align-items: stretch 是“尽力而为”，不是强制覆盖。只要子项写了 height、max-height 或 min-height，这些声明优先级更高，stretch 就自动退场。
- 典型现象：一个
div里放文字，但没撑满行高 → 检查它是否带了height: 20px或max-height: 30px -
img标签尤其容易踩坑：它自带固有尺寸，得额外加height: 100%+object-fit: cover才可控 - 想保留内容高度又居中？把
align-items改成center，再给子项设align-self: center（注意不是stretch）
你调的不是直接父容器，或者子项不是直接子元素
align-items 只对 Grid 容器的**直接子元素**生效。中间多一层 wrapper，哪怕只是个空 div，它就成了 grid item，你真正想对齐的内容只是它的后代，完全不受影响。
- 用 DevTools 选中目标元素，往上逐级看 DOM 结构，确认它是否紧贴在
display: grid元素下 - Vue/React 中的 Fragment、
<template></template>或动态插入的节点，可能悄悄加了一层不可见包裹 - 别把
align-items写在 body 或 layout wrapper 上，除非那真是网格容器
浏览器正在静默忽略 align-items: baseline
如果你写了 align-items: baseline，它根本不会生效——这不是 bug，是规范不支持。Grid 布局没有基线对齐模型，所有主流浏览器都会把它当无效声明，回退到 stretch，DevTools 里该属性还带删除线。
- Flexbox 支持
baseline，但 Grid 不支持，不能凭经验迁移 - 真要基线对齐：把需要对齐的元素放进一个
display: flex容器里，再把这个 flex 容器作为 grid 子项 - 示例：
.cell { display: flex; align-items: baseline; }—— 这个align-items生效，因为它是 flex 容器的属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
