CSS Grid是双栏响应式最可靠方案，推荐用1fr 2fr（弹性）或30% 70%（可控）定义比例，避免混用单位；小屏必须用@media重置为1fr单列，而非仅调gap或隐藏；Flexbox双栏需加align-items: flex-start防拉高，并用flex: 0 0 30%替代width。
CSS Grid 是目前最可靠、语义最清晰的双栏响应式方案，比 Flexbox 更少踩坑，尤其在内容高度不均时无需额外干预。
用 grid-template-columns 定义比例，别写死像素
双栏本质是列宽比例关系，不是固定尺寸。写 30% 70% 或 1fr 2fr 都比 200px auto 更健壮：
-
30% 70%直观可控，适合简历、介绍页等左侧信息密度低的场景 -
1fr 2fr更弹性，当容器宽度变化时两栏按比例缩放，适合内容长度差异大的页面 - 避免
200px 1fr这类混用——小屏下固定侧栏可能溢出，且无法被@media统一收束
小屏切单栏必须用 @media 覆盖 grid-template-columns
仅靠 flex-direction: column 或隐藏某栏，会破坏文档流或让屏幕阅读器丢失结构。正确做法是直接重置网格列定义：
- 桌面端：
.container { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; } - 小屏端（≤768px）：
@media (max-width: 768px) { .container { grid-template-columns: 1fr; } } - 不要只改
gap或align-items，那只是视觉微调，列结构没变，打印或屏幕阅读器仍读作双栏
Flexbox 做双栏时，align-items: flex-start 是默认必须项
很多人用 Flex 实现双栏后发现右侧内容被“拉高”到和左侧一样，这是 align-items: stretch 的默认行为导致的。简历、翻译对照等场景中，左右内容天然不等高，强制拉齐反而突兀：
立即学习“前端免费学习笔记（深入）”；
- 显式加
align-items: flex-start，让两栏各自按内容撑高 - 用
flex: 0 0 30%替代width: 30%，防止内容超长时 Flex 主动压缩侧栏 - IE11 兼容需注意：
gap不支持，得用margin模拟间距，且flex-wrap: wrap在单行布局中虽不触发，但建议保留以防后续扩展
真正容易被忽略的是：双栏的语义对齐比视觉对齐更重要。比如翻译界面，左右 <p></p> 必须成对包裹在 <section class="translation-pair"></section> 里，否则响应式切换后 DOM 顺序错乱，屏幕阅读器或打印输出就完全失序。视觉上并排了，不代表结构上可映射。
