默认 align-items 和 justify-items 为 stretch 是 Grid 拉伸根源；设 place-items: start 可禁用拉伸、回归内容尺寸；对个别子项用 place-self: start；需注意替换元素、嵌套 Flex 及隐性布局因素。
默认的 align-items: stretch 和 justify-items: stretch 是 Grid 的行为根源，禁用它不是“修复 bug”，而是显式覆盖对齐策略。
直接关闭容器级拉伸：设 align-items 和 justify-items 为 start
这是最干净、影响范围可控的做法。Grid 容器默认拉伸所有子项填满轨道，只要改掉这两个属性，所有子项就回归内容尺寸（fit-content 行为）：
-
align-items: start禁用垂直拉伸，子项按自身高度渲染，顶部对齐 -
justify-items: start禁用水平拉伸，子项按自身宽度渲染，左对齐（LTR） - 二者可合并简写为
place-items: start - 注意：若子项是图片或按钮等替换元素，仍需额外加
max-width: 100%或height: auto防止轨道硬撑
只对特定子项禁用拉伸：用 align-self 和 justify-self
当大部分子项需要拉伸，仅个别（如链接、图标、按钮）要收缩时，不改容器，单独控制子项：
- 给目标子项设
align-self: start（禁用垂直拉伸）和justify-self: start（禁用水平拉伸） - 可合并为
place-self: start，语义清晰且兼容性好 - 避免用
align-self: auto：Safari 旧版本解析不稳定，明确写start更可靠 - 若该子项内部还有 Flex 布局，记得检查它的
min-height——现代浏览器默认min-height: auto，可能意外阻断内层拉伸
为什么设了 center 却没效果？其实是拉伸还在生效
常见错觉：以为 justify-self: center 或 align-self: center 能“同时居中又不拉伸”，但其实只要没关掉 stretch，它就在拉伸基础上再居中——视觉上仍是撑满的。
-
justify-self: center只在水平方向居中，但宽度仍被拉伸到轨道宽度 - 真正要“居中且不拉伸”，必须先确保轨道不强制撑开：比如把
1fr改成minmax(min-content, 1fr)，再配justify-self: center - 若行高是
auto，align-self: center在 Firefox 下可能不触发，Chrome 更宽松；稳妥起见，行轨道应有明确高度，如grid-template-rows: 80px 1fr
嵌套 Flex 时特别容易踩坑：子项高度塌陷
Grid 项里再套 Flex 容器，常出现 Flex 子项高度不展开——不是 Flex 失效，而是 Grid 项本身没高度上下文。
- Grid 项默认
align-items: stretch，但若父 Grid 的grid-template-rows是auto，它实际高度就是内容高度，Flex 容器拿不到“可分配空间” - 解法：给 Grid 项加
min-height: 0（解除默认最小高度限制），再给内部 Flex 容器加height: 100%或min-height: 100% - 千万别在 Grid 项上同时写
align-items: stretch和height: fit-content——后者会覆盖前者，导致拉伸失效却不报错
真正难处理的从来不是怎么关拉伸，而是关掉之后，图片、iframe、文字换行、字体行高差异这些隐性因素突然暴露出来——它们不会报错，但会让“收缩后对齐”看起来依然错乱。调试时优先检查子项的 min-width 和 box-sizing，比反复调 place-self 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
