place-items: center 对卡片无效，因缺少明确行轨道或容器高度；需用 grid-auto-rows: 1fr 或 min-height 锚定行高，并确保 display: grid 和容器有高度。
为什么 place-items: center 对卡片没反应？
常见现象是加了 place-items: center，但卡片内容依然顶部贴边，甚至高度不一致。根本原因不是写法错，而是 Grid 的“对齐基准”缺失：它只在有明确轨道（rows/columns）或容器高度时，才决定“往哪居中”。卡片流通常用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，这种写法不定义 grid-template-rows，浏览器就按内容撑高每行——每张卡片各行其是，align-items 失去统一参照系。
解决思路很直接：强制所有卡片共享同一行高基准。不靠内容撑开，而用 grid-auto-rows 或 min-height 锚定高度空间。
- 加
grid-auto-rows: 1fr：让每行自动分配剩余高度，卡片再通过align-items: center在该行内垂直居中 - 或给容器设
min-height: 300px（根据设计需要），配合align-items: center，确保有“可居中的垂直空间” - 避免只写
place-items: center却漏掉display: grid或容器无高度——这是最常被忽略的硬性前提
grid-template-rows 和 grid-auto-rows 怎么选？
两者都影响等高，但作用机制完全不同，选错会导致卡片高度忽高忽低或留白失控。
grid-template-rows 是显式定义行数和尺寸，比如 grid-template-rows: 200px 200px，适合固定行数场景；而卡片流数量不确定，必须用 grid-auto-rows——它管的是“自动创建的隐式行”的默认高度。
- 用
grid-auto-rows: 1fr：所有隐式行均分容器剩余高度，卡片在各自行内align-items: center，视觉上等高且内容居中 - 用
grid-auto-rows: minmax(200px, 1fr)：保底 200px 高，内容多时可弹性拉伸，兼顾内容可读性与布局稳定性 - 别混用
grid-template-rows+grid-auto-rows除非你真需要混合显隐行——卡片流几乎不需要显式行定义
卡片内容垂直居中失效的三个隐藏条件
即使写了 align-items: center，内容仍不居中，大概率踩中以下任一条件：
- 卡片内部用了
display: flex或display: grid，但没给子容器设height: 100%或min-height: 100%——父卡片的“行高”传不进内层布局 - 卡片里有图片或按钮等替换元素，默认
vertical-align: baseline，会拖低整体基线；加align-self: center到该元素本身，或统一设vertical-align: middle - 卡片设置了
padding但没配box-sizing: border-box，导致实际高度超出grid-auto-rows分配值，挤压居中空间
响应式下如何保持等高+居中不破相？
从 4 列切到 2 列时，如果只靠 grid-auto-rows: 1fr，单行卡片数减半，每张卡片分配到的“行高”会翻倍，可能撑出过大空白。这时候要配合媒体查询动态调整行高策略：
- 小屏（如
max-width: 768px）改用grid-auto-rows: minmax(160px, auto)，让高度随内容自然收敛，避免过度拉伸 - 或换用
align-content: center+height: 100vh组合：把整套网格轨道当一个块，在容器内垂直居中，适合全屏卡片墙 - 绝对不要依赖
margin: auto垂直居中卡片内容——它只在 Grid 子项未指定行列跨度、且轨道尺寸为auto时生效，卡片流中基本不可控
真正难处理的不是怎么写，而是意识到：Grid 的“等高”和“居中”本质是两件事——前者靠行轨道约束，后者靠单元格内对齐。混在一起调，不如拆开盯住 grid-auto-rows 和 align-items 各自的生效范围。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
