推荐用 display: grid 实现最简双列响应式，关键为 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))，小屏自动退单列，避免压缩变形。
用 display: grid 实现最简双列响应式（推荐）
现在写双列响应式，display: grid 是首选，不用媒体查询也能自动退单列，代码少、逻辑直、维护成本低。
常见错误现象：写成 grid-template-columns: 1fr 1fr，小屏下两列被压缩到极窄，文字强制换行、按钮错位、图片变形。
-
minmax(300px, 1fr)是关键——每列最小 300px，超出部分均分；小屏时总宽 - 必须加
gap控制间距，比如gap: 1rem；别用margin，否则可能触发父容器溢出或破坏轨道计算 - 如果左列需固定宽度（如侧边栏），改用
grid-template-columns: 250px 1fr，右列自适应，无需媒体查询也能保持结构稳定
用 display: flex + 媒体查询保兼容（IE11 / 旧 Safari）
若项目仍需支持 IE11 或 Safari ≤ 14.1，flex 是更稳妥的选择，但得配合断点控制，不能只靠 flex-wrap。
常见错误现象：只写 flex-wrap: wrap 却没设 flex-direction: column，小屏下子项仍强行横排，导致横向滚动；或用 width: 50% 导致内边距撑破容器。
立即学习“前端免费学习笔记（深入）”；
- 子项用
flex: 1 1 300px（即flex-grow、flex-shrink、flex-basis），比width更容错 - 断点别按“平板尺寸”硬写
@media (max-width: 768px)，而应按内容自然折行点设，通常600px–640px更可靠 - 必须显式声明
flex-direction: column在小屏下，否则即使wrap也无效
为什么不要用 float 或 inline-block
这两种方式在新项目里已无正当理由使用，不是“能跑就行”，而是会持续制造隐性问题。
典型错误：给两列都设 float: left，父容器没触发 BFC，后续元素上浮；或用 inline-block 后因 HTML 换行符产生 4px 间隙，第二列掉行。
-
float在flex或grid容器中会被浏览器忽略——开发者工具里看computed样式，float值恒为none -
inline-block的间隙无法用font-size: 0彻底规避（影响子元素字体继承），且不支持对齐控制 - 响应式切换时，
float需重复重写清除逻辑，flex/grid只需改一两个属性
容易被忽略的细节：DOM 顺序 vs 视觉顺序
当双列内容语义上是线性阅读流（比如新闻列表、表单字段组），但 DOM 结构是左列全写完再写右列，小屏堆叠就会错乱——用户看到的是「所有左列→所有右列」，而非「第1项→第2项→第3项…」。
正确做法是让 HTML 元素按最终期望的阅读顺序书写，再用 grid 控制宽屏下的二维排列：
- 写
grid-template-columns: repeat(2, 1fr)，元素按行优先（row-major）自动填入两列 - 小屏时仅用
@media (max-width: 500px) { grid-template-columns: 1fr; }切单列，DOM 顺序即视觉顺序 - 别依赖
order或position: absolute调整顺序——可访问性（screen reader）和 SEO 会受损
