Grid做两栏更稳，因其是二维布局，grid-template-columns一行锁死列结构，不受内容高度影响，天然支持列固定与行自适应，且gap和minmax()可无缝响应；而Flexbox一维换行易因高度不均错行、漏对齐。
两栏自适应布局，用 display: grid 更直接、更可控；Flexbox 也能做，但容易在内容高度不均或响应断点处错行、漏对齐。
为什么 Grid 做两栏更稳？
Grid 是二维布局，grid-template-columns 一行就能锁死列结构，不管子项内容多高、文字多少行，都不会影响列数。它天然支持“列固定、行自适应”，且 gap 和 minmax() 可无缝配合响应逻辑。
常见错误现象：
- Flex 容器加了
flex-wrap: wrap后，第二栏第一项被挤到第三行（因前一项高度过高，换行判断出错） - 用
flex: 0 0 50%实现两栏，但父容器padding或子项border导致总宽超 100%，实际只显示一栏 - 未设
box-sizing: border-box，内边距撑破列宽，小屏下意外横向滚动
实操建议：
- 基础两栏：
display: grid; grid-template-columns: 1fr 1fr; gap: 16px; - 响应式降为单栏（≤767px）：
@media (max-width: 767px) { grid-template-columns: 1fr; } - 防塌陷加一行：
grid-auto-rows: minmax(120px, auto);
Flexbox 做两栏时哪些参数必须配齐？
Flexbox 是一维布局，强行做两栏本质是“让项目换行并平均占宽”，所以必须同时控制三项：方向、换行、单个项目宽度。缺一不可。
关键配置组合：
-
display: flex+flex-wrap: wrap（否则所有子项死挤一行） - 每个子项设
flex: 0 0 calc(50% - 8px)（减去 gap 的一半，避免溢出） - 父容器加
margin: -4px抵消子项外边距，或统一用gap（但注意 Flexbox 的gap在 Safari 14.1+ 才稳定） - 务必设
box-sizing: border-box到所有子项
性能与兼容性提醒：Flexbox 兼容性略好于 Grid（iOS 12+ 就支持 flex-wrap），但现代项目中这已不是理由——iOS 14.5+ 已完整支持 Grid，而你的用户大概率不在 iOS 13 以下。
什么时候该坚持用 Flexbox 做两栏？
仅当两栏内容高度严格一致，且不涉及响应式列数切换时，Flexbox 才有优势。典型场景是底部导航栏、双按钮操作组、头像+文字的媒体对象（media object）。
例如：
.media {
display: flex;
align-items: flex-start; /* 防止文字过长导致头像上浮 */
}
.media img {
flex: 0 0 48px;
margin-right: 12px;
}
.media .text {
flex: 1;
}
这种“主辅结构”不是等宽两栏，而是弹性分配空间，Flexbox 的 flex 属性比 Grid 的轨道定义更自然。
别忽略的细节：内容跨栏和对齐语义
Grid 支持 grid-column: 1 / -1 让某个标题横跨两栏，Flexbox 没有原生跨列能力，只能靠 width: 100% + order 模拟，但语义混乱、维护成本高。
垂直对齐也不同：Grid 用 align-items: start 控制整行项目顶部对齐；Flexbox 用 align-items: flex-start，但若某子项内部有 height: 100%，可能因父容器未设高度而失效——Grid 的 minmax() 能主动兜底。
真正难处理的不是“怎么写出来”，而是“内容变长、图片加载延迟、字体加载后重排”这些动态场景下，Grid 的结构稳定性明显更高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
