用 CSS Grid 实现响应式双栏布局需用 grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) 实现自然堆叠，配合 gap 和 @supports 降级至 Flexbox，并为栏目设独立滚动、overscroll-behavior: contain 等细节优化。
用 CSS Grid 实现响应式双栏自动换行
双栏布局在小屏上硬挤成一列，不是“换行”，是“崩溃”。真正优雅的换行，是让左右两栏在视口缩小时自然堆叠，且不依赖 JavaScript 监听 resize。核心就一条：grid-template-columns 配合 minmax() + auto-fit。
常见错误是写死 grid-template-columns: 1fr 1fr 或用 flex + flex-wrap，但后者无法保证左右栏内容对齐、行高同步，尤其在代码对比或 Markdown 编辑这类需要视觉对齐的场景里，错位一眼就能看出。
-
display: grid容器设为grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))—— 这表示：每栏最小 400px，最大占满可用空间，当放不下两栏时，自动变成 1 列 - 加上
gap: 1rem控制间距，比用margin更稳定，不会因换行导致外边距叠加 - 避免用
fr单位做固定比例（如2fr 1fr），它在单列时仍会按比例分配宽度，破坏“全宽”预期 - 若需左侧固定宽度（如行号栏）、右侧自适应，改用
grid-template-columns: 60px 1fr，再配合媒体查询在max-width: 768px时切回1fr
媒体查询 fallback 是必须的，但别只靠它
Grid 自动换行虽好，但老浏览器（如 IE11）不支持 auto-fit。这时候不能裸奔，得有降级方案。
典型错误是只写一套 Grid 样式，上线后发现内网用户打不开双栏——因为他们的终端还跑着旧版 Edge 或定制 Chromium 内核。
- 先写 Flexbox fallback：
display: flex; flex-wrap: wrap，子项加flex: 1 1 400px，并设min-width: 0防止内容撑破 - 用
@supports (display: grid)包住 Grid 样式，确保老浏览器跳过执行 - 别忘了给双栏容器加
width: 100%，否则 Flex fallback 在某些 Safari 版本里会塌陷
双栏内容高度不一致？别用 align-items: stretch 硬拉
很多双栏工具（比如 diff 查看器、Markdown 编辑器）左右内容长度差异大，强行拉伸会导致空白过多、滚动不同步，用户得来回拖两个滚动条。
真正合理的做法是允许各自独立滚动，同时保持顶部对齐。
- 给左右栏分别设
overflow-y: auto; max-height: 60vh，而不是给外层容器设overflow - 用
align-items: start替代stretch，避免高度被最长栏绑架 - 如果需要“滚动联动”（如编辑器实时预览），必须用 JavaScript 监听
scroll事件同步 scrollTop，但要注意节流和跨域 iframe 限制
移动端触摸滚动卡顿？检查 will-change 和 overscroll-behavior
在 iOS Safari 或部分安卓 WebView 中，双栏滚动卡顿往往不是性能问题，而是浏览器默认行为干扰。
例如：右栏滚动到底部再往下拖，会触发整个页面回弹；左右栏同时滚动时，一个卡住另一个也跟着卡。
- 给每个可滚动栏加
overscroll-behavior: contain，禁用滚动链式传递 - 对频繁滚动的栏加
will-change: scroll-position，提前告知浏览器优化路径（注意别滥用，否则反而增加内存开销） - 避免在滚动容器上设
transform或filter，它们会创建新层叠上下文，干扰滚动合成
双栏换行看着简单，实际卡点都在细节：Grid 的断点值是否贴合真实设备宽度、老浏览器降级是否真生效、滚动行为是否被默认策略拖累。最常被忽略的是——没测过折叠屏（如 iPhone Duo）横竖切换时的重排逻辑，那里连 resize 事件都可能延迟触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
