<p>place-items 是 CSS Grid Level 2 复合属性，IE11 和 Safari ≤10.1 因语法不识别而直接丢弃整条声明，必须拆解为 align-items + justify-items 并配合 -ms- 前缀和 Flex 回退才能可靠降级。</p>
place-items 是 CSS Grid Level 2 的复合属性，IE11、Safari ≤10.1、Chrome ≤56 等旧浏览器根本无法识别该属性名——不是“不支持值”，而是语法层面跳过整条声明，连 fallback 都不会触发。
必须用 align-items + justify-items 拆解，并配合浏览器前缀和降级策略，否则在 IE11 里直接白屏或错位。
为什么 place-items: center 在 IE11 和 Safari 10.1 完全无效
IE11 只认 display: -ms-grid，且对齐必须拆成两个独立属性：-ms-grid-column-align 和 -ms-grid-row-align；Safari 10.1 虽支持 display: -webkit-grid，但既不支持 place-items，也对 justify-items 和 align-items 支持极不稳定（尤其在非水平 writing-mode 下）。
-
place-items: center→ IE11 解析失败，整行被丢弃，无 warning、无 computed style -
justify-items: center; align-items: center;→ Safari 10.1 可能只生效其中一个，或完全忽略 - Autoprefixer 不会处理
place-items→ 它只补全 Level 1 属性，Level 2 复合属性不在其作用域内
正确降级写法：分层覆盖 + 前缀 + Flex 回退
不能只靠 Grid 内部属性降级。真正可靠的 fallback 是外层改用 Flex 布局，因为 Flex 的 justify-content + align-items 在 IE10+（带 -ms- 前缀）已稳定支持。
立即学习“前端免费学习笔记（深入）”；
- 先写现代写法：
display: grid; place-items: center; - 紧接着在同一选择器块内加 Level 1 拆解（供 Safari 10.1 等部分支持者）：
justify-items: center; align-items: center; - 再加 IE11 专用前缀：
-ms-grid-column-align: center; -ms-grid-row-align: center; - 最后兜底 Flex（最安全）：
display: flex; justify-content: center; align-items: center;—— 这行必须放在所有 Grid 声明之后，确保它在 IE11 中生效
注意顺序：Flex 声明必须在 Grid 声明之后，否则现代浏览器会误用 Flex 覆盖 Grid 行为。
@supports 检测必须锁定 place-items 本身
@supports (display: grid) 完全不可靠——它只说明浏览器认识 Grid，不代表支持 place-items。真正有效的检测是：
@supports (place-items: center) {
.grid-center {
display: grid;
place-items: center;
}
}更稳妥的写法是叠加检测：
@supports (display: grid) and (place-items: center) {
/* 只有 Level 2 完整支持的浏览器才进这里 */
}- Safari ≤15.4、IE 全系、Chrome ≤56：不满足
place-items: center，直接跳过整个块 - 某些构建工具（如 UnoCSS 的属性化模式）会把
place-items-center当作未知类名忽略，需手动加入safeList
别指望简写自动降级，原子属性必须逐个补全
place-items 是语法糖，不是语法增强。旧浏览器没有“解析失败后尝试拆解”的机制。你写的每一条声明都必须是它能理解的原子形式。
- 错误：
place-items: center;单独存在 → IE11/Safari 10.1 全挂 - 错误：
justify-items: center;单独存在 → Safari 10.1 可能失效，IE11 直接无视 - 正确：三重保障 ——
-ms-前缀 + Level 1 拆解 + Flex 外层兜底，且全部写在同一规则块内
最容易被忽略的是：Flex 回退必须作用于同一容器，而不是子元素；且 display: flex 必须写在所有 Grid 声明之后，否则现代浏览器会破坏 Grid 布局语义。这不是“多写几行就能好”的事，是渲染引擎层面的解析断层。
