Flex和Grid混用错位因Grid项min-width: auto顶开Flex收缩逻辑，应设flex-shrink: 0；IE11不支持auto-fit需回退Flex或固定列数+媒体查询；align-items与align-content作用域不同；Grid卡顿可加transform: translateZ(0)或移出动画。
Flex和Grid混用时，为什么布局会“突然错位”
因为浏览器按渲染顺序逐层计算布局，display: flex容器内的子元素若又设了display: grid，Grid项的min-width: auto默认行为会顶开Flex的收缩逻辑，尤其在小屏下触发意外换行或溢出。
- 别在Flex子项里直接写
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))——先用flex-shrink: 0锁住该项宽度再套Grid - 移动端优先场景下，建议Flex只管“大分块”（如header/main/aside），Grid专管“内部网格流”，边界要清晰
- Chrome DevTools里选中元素后看Computed面板，重点盯
flex-basis和grid-column-start是否被意外覆盖
用Grid实现响应式卡片列表，但IE11要兼容怎么办
IE11不支持grid-template-columns: repeat(auto-fit, ...)，也不识别minmax()，强行使用会导致整行塌陷成单列，且无报错提示。
- 用
@supports (display: grid)做特性检测，里面写现代Grid；外面回退到display: flex+flex-wrap: wrap - 避免依赖
auto-fit，改用明确列数+媒体查询：grid-template-columns: repeat(3, 1fr)→@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr) } - IE11下
grid-gap无效，必须用margin模拟，且要给最后一行子项加margin-right: 0防错位
Flex布局里align-items和Grid里align-content到底谁生效
两者作用域完全不同：align-items控制Flex项目在交叉轴上的对齐（单行有效），align-content只在Grid有多行轨道且容器有剩余空间时才起作用——它对齐的是“行轨道组”，不是单个格子。
- 如果Grid只有一行（比如
grid-template-rows: 100px），align-content完全无效，此时该用justify-items或align-items - Flex中想垂直居中整个内容块，优先用
align-items: center+justify-content: center；Grid中同效果应设place-items: center - 混用时注意层级：外层Flex的
align-items会影响内层Grid容器的位置，但不影响Grid内部子项的对齐
为什么加了display: grid后字体变模糊、动画卡顿
某些旧版Chromium内核（如Electron 13–15）对Grid容器启用硬件加速不友好，尤其当Grid项含transform或will-change时，容易触发非合成层绘制，导致文本亚像素渲染异常或60fps掉帧。
立即学习“前端免费学习笔记（深入）”；
- 临时修复：给Grid容器加
transform: translateZ(0)强制创建合成层（慎用，可能引发z-index穿透） - 更稳做法：把动画逻辑移出Grid项，放到其子容器上，并确保该子容器有明确
width/height和overflow: hidden - 排查时打开DevTools → Rendering → 勾选“Paint flashing”，看Grid区域是否高频重绘；若是，说明CSS触发了layout而非composite
