响应式布局切换核心是用@media动态修改容器display值，如小屏flex垂直堆叠、大屏grid三栏；需显式重置grid-template-columns等属性，避免溢出，并注意display:contents的兼容性与渲染影响。
用 @media 切换 display: flex 和 display: grid
响应式布局切换的核心不是“写两套布局”，而是用媒体查询动态改容器的 display 值。比如一个内容区，在桌面用 grid 做三栏，在手机上切回 flex 垂直堆叠，只需控制父容器：
section {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
section {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
}注意：不要在同一个选择器里混写 grid 和 flex 属性（比如同时设 grid-column 和 flex-grow），浏览器会忽略冲突属性。切换时整套布局逻辑要重置。
避免 grid 在小屏下强行维持列数导致溢出
常见错误是写了 grid-template-columns: repeat(4, 1fr) 却没在小屏断点里覆盖它，结果手机上四列挤成一条横向滚动条。必须显式重写：
- 小屏优先：默认用
grid-template-columns: 1fr，大屏再repeat(3, 1fr) - 用
minmax()配合auto-fit更安全，例如grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，但要注意 Safari 对auto-fit支持较晚（iOS 14.5+） - 如果内容高度差异大，
grid-auto-rows: minmax(100px, auto)能防止某格被拉得过高
Flexbox 的 flex-wrap 和 Grid 的 grid-auto-flow 行为差异
两者都能“换行”，但触发逻辑不同：
立即学习“前端免费学习笔记（深入）”；
-
flex-wrap: wrap是当子项总宽度超容器时，把溢出项推到下一行——依赖实际尺寸计算 -
grid-auto-flow: row dense是按网格轨道自动填满空位，不关心子项宽高，适合卡片流；但若子项用grid-column: span 2，可能打乱视觉顺序 - 移动端慎用
flex-direction: row+flex-wrap，某些安卓 WebView 会错误计算换行点，建议改用flex-direction: column+ 固定高度容器
用 display: contents 精简嵌套结构对响应式的影响
当 Flex/Grid 容器内有冗余 wrapper（比如为了语义加的 但要注意： 真正麻烦的是跨断点时父子关系变化——比如桌面用 Grid 控制子项顺序，手机用 Flex 但又想保持相同视觉顺序，就得靠 ），小屏时可用 display: contents 让它“消失”，让子元素直接受父容器布局控制：.card {
display: contents;
}
.card > * {
/* 子元素直接参与父级 grid/flex 排列 */
}display: contents 会让该元素脱离渲染树，其背景、边框、padding 全部失效，且部分旧版浏览器（IE、Edge 16-）不支持。调试时用 DevTools 的“Layout”面板确认是否真被跳过。order 或 grid-row 显式声明，不能依赖源码顺序。
