transform不触发布局重排，仅作用于合成层，不影响grid轨道计算和子项逻辑位置，但会创建新层叠上下文并改变事件热区。
因为 transform 作用于渲染层，不参与布局计算——网格轨道（grid-template-rows、grid-template-columns）在 layout 阶段就已固定，transform 只是在合成层上“画”一个变形后的视觉副本。
transform 不改变 margin box 是规范行为，不是 bug
Grid 布局引擎在生成轨道和分配空间时，完全忽略 transform。子项的 margin box（决定它占几列几行、影响 grid-auto-rows 计算）始终是原始尺寸和位置。
- 即使
transform: scale(2)，该子项仍只占据声明的grid-column: 1 / 2所对应的单列宽度 -
transform: translateX(100px)不会让它“挤开”右边的兄弟项，也不会触发重排 -
getBoundingClientRect()返回的是原始布局坐标，不是视觉后的位置
为什么 grid-column / grid-row 在 transform 后还能对齐？
因为定位属性（grid-column、grid-row）控制的是元素在网格坐标系中的**逻辑位置**，而 transform 控制的是它在该位置上的**视觉呈现方式**——二者互不干扰。
- 子项仍被严格限制在所属网格单元的 content-box 内（除非父容器
overflow: visible） - 若放大后溢出，是视觉层裁切，不是轨道错位；检查
overflow和z-index即可 - 用
align-self: center; justify-self: center;+transform-origin: center;能确保缩放中心与网格单元中心一致
容易被忽略的副作用：隐式层叠上下文与事件热区
给 Grid 子项加 transform 会强制创建新的层叠上下文，同时让它的 position: absolute 子元素、z-index、点击热区全都基于原始矩形计算，而非视觉区域。
立即学习“前端免费学习笔记（深入）”；
- 鼠标点击“看起来”在放大后的区域，但实际命中点仍是原始
width × height矩形 - 如果子项内有
position: absolute的按钮，它的top: 0仍从原始顶部起算，不是缩放后顶部 - 父容器若也用了
transform或opacity，两层上下文嵌套可能导致 z-index 完全失效
真正需要“让 transform 影响布局”的场景极少；多数时候，问题出在误以为视觉错位 = 布局错位，其实只需校准 transform-origin、overflow 和层叠顺序。
