place-content只对多行（或多轨）网格容器生效，控制轨道组在块轴和内联轴的对齐，需显式定义多行或内容撑出多行才能触发；单行时无效。
place-content在多行grid布局中到底管什么
place-content 是 align-content 和 justify-content 的简写，但它**只对多行（或多轨）的网格容器生效**——单行 grid-template-rows: auto 或只有一行显式定义的网格，place-content 不起作用。
常见错误现象：place-content: center 写了但子项完全没居中，大概率是因为你只写了 grid-template-rows: 1fr，实际只有一行轨道，此时它只控制该行轨道自身在容器块轴上的位置（几乎不可见），而不是子项。
- 必须满足：容器有至少两行（或两列）显式轨道，或内容撑出了多行（
grid-auto-rows触发自动行生成） - 典型触发场景：使用
grid-auto-flow: row wrap+ 多个子项、或显式定义grid-template-rows: 1fr 1fr - 注意兼容性：
place-content在 Safari 14.1+ 才完整支持多轴独立值（如place-content: flex-end space-between），旧版本建议拆成两个属性
怎么让三行网格整体垂直水平居中（含空隙）
目标是：容器高度固定，三行内容（可能不等高）整体在容器内居中，并保持行间均匀留白。这时候不能只靠 align-items，它只控制单行内子项对齐。
正确做法是让 place-content 同时管理块轴（垂直）和内联轴（水平）的**轨道组对齐**：
立即学习“前端免费学习笔记（深入）”；
.grid {
display: grid;
height: 400px;
grid-template-rows: max-content max-content max-content;
place-content: center; /* 垂直+水平都居中轨道组 */
gap: 1rem;
}-
grid-template-rows必须明确为多行（哪怕用max-content），否则无“轨道组”可对齐 -
gap会影响轨道组总高度，place-content对齐的是整个轨道组（含 gap），不是子项边界 - 如果某行内容高度远超其他行，
center仍以轨道组中心为基准，不会拉伸/压缩行高
place-content: start end 和 align-content/justify-content 的顺序差异
place-content: start end 表示块轴对齐方式为 start（顶部），内联轴为 end（右对齐）。这个顺序是固定的：先块轴，后内联轴，和书写模式无关。
容易踩的坑：
- 误以为
place-content: end start是“右对齐+顶部”，其实它是“底部+左对齐”（因为第一值永远是align-content） - 在 RTL（如
dir="rtl"）下，justify-content: end仍指向容器右边缘，不受文本方向影响；但justify-content: right才会随dir切换左右——所以别混用right/left和start/end - IE 完全不支持
place-content，需回退到align-content: start; justify-content: end;
为什么place-content对grid-auto-rows生成的行有时失效
当使用 grid-auto-rows: 80px 且子项数量动态变化时，place-content 是否生效，取决于浏览器是否将自动生成的行视为“多行轨道组”——这在规范里是明确的，但部分旧版 Chromium（如 Chrome 87 前）存在 bug：若所有行都由 grid-auto-rows 生成、且无显式 grid-template-rows，place-content 可能被忽略。
- 稳妥解法：加一行空的显式定义，例如
grid-template-rows: 0px; grid-auto-rows: 80px，强制创建多轨道上下文 - 验证是否生效：打开 DevTools → Elements 面板 → 检查网格线，看是否有多个水平轨道线（而不仅是一条）
- 性能提示：频繁增删子项时，
place-content不触发重排，但每次 DOM 变更仍会重新计算轨道组尺寸，大量子项下注意渲染开销
真正麻烦的是混合显式/隐式行 + 动态内容 + CSS 容器查询的场景，这时 place-content 的行为边界容易模糊，得靠 align-content 单独控制再加一层保险。
