响应式三栏转单栏应移动端优先：默认单栏流式布局，再用@media (min-width: 768px)在宽屏下通过grid或flex实现三栏；grid推荐repeat(3, 1fr)与gap，flex需设min-width和flex-wrap。
三栏在桌面显示、单栏在手机显示，用媒体查询最直接
响应式三栏转单栏，核心就一条：默认写单栏流式布局，再用 @media 在宽屏下强制改成三栏。反着来（先写三栏再“收缩”）容易漏掉清除浮动、高度塌陷或 flex 项目换行控制等问题。
- 移动端优先，
display: block或display: flex; flex-direction: column作为基础样式 - 桌面断点建议用
@media (min-width: 768px)（兼容多数平板横屏），别用max-width做主逻辑，否则小屏设备可能因缩放触发错误断点 - 三栏推荐用
display: grid，比 float 或 inline-block 更稳；列宽用1fr 1fr 1fr或repeat(3, 1fr)，避免固定像素导致溢出
Grid 实现三栏时，gap 和 justify-items 别设错
grid-gap（或 gap）控制间距，但很多人设了 justify-items: center 后发现三栏挤在中间——这是因为它作用于每个格子内部内容，不是整行对齐。要居中整组三栏，得用 justify-content: center 在 grid 容器上。
-
gap: 1.5rem比margin更干净，不会影响外边距折叠 - 如果三栏内容高度不一致，加
align-items: start防止底部错位 - IE11 不支持
gap，需回退用grid-column-gap+grid-row-gap（但 IE11 已基本可忽略）
用 Flex 实现时，flex-wrap 和 min-width 是关键防线
Flex 比 Grid 兼容性更好，但三栏在窄屏下容易被强行压缩变形。根本原因是没设 min-width 或忘了 flex-wrap: wrap，导致项目死扛不换行。
- 给每个栏加
min-width: 280px（略大于手机竖屏常用宽度），再配flex: 1 1 auto - 容器必须设
flex-wrap: wrap，否则即使超出父容器宽度，三栏也硬撑成一行并溢出 - 别用
flex-basis: 33.33%—— 小数精度 + 边框/内边距会让总宽超 100%，直接触发换行；改用flex: 1更可靠
常见报错：display: grid 不生效？先查父容器宽度和 display 类型
写完 grid 样式却还是竖排，大概率是父容器没设宽度、或者父容器本身是 display: inline 类型（比如 span）。Grid 只对块级容器起效，且需要明确的宽度上下文。
立即学习“前端免费学习笔记（深入）”；
- 检查父元素是否被设了
display: inline或display: inline-block；如果是，加display: block或直接用div - 父容器若无显式宽度（如
width: 100%或max-width），在某些嵌套场景下 grid 列可能坍缩 - Chrome DevTools 里看 computed 样式，确认
display确实是grid，而不是被其他规则（比如!important覆盖）覆盖掉了
height 卡死了内容流动。 
