display: grid是目前最稳、最简、最不易翻车的双栏实现方式，无需处理浮动塌陷、定位脱离文档流及IE兼容等问题；其列宽推荐用minmax(280px, 30%)和minmax(600px, 70%)语义化设定，并在@media中同步调整gap与移除固定类名以保障响应式健壮性。
用 display: grid 是目前最稳、最简、最不易翻车的双栏实现方式，不需要考虑浮动塌陷、定位脱离流、IE 兼容等历史包袱。
为什么不用 float 或 position: absolute
常见错误现象包括：右侧内容被挤到下一行、父容器高度塌陷、小屏下无法切换单列、打印时错位。这些都不是“调一下 margin 就好”的问题，而是结构性缺陷。
-
float必须配合overflow: hidden或clear: both才能防止塌陷，但一旦嵌套或加动画就容易失效 -
position: absolute会让元素脱离文档流，后续内容会直接顶到顶部，new part这类新章节根本不会换行显示 - 两者都不支持基于内容自动等高，左右栏高度差异大时视觉割裂感强
grid-template-columns 的实际取值怎么选
别写死像素值，也别盲目用 1fr 2fr——它只在两栏内容长度接近时才好看。简历、产品介绍页这类场景，更推荐按语义比例划分。
- 左侧放个人信息/技能/导航：用
30%或minmax(280px, 30%)，兼顾小屏最小可读宽度和大屏比例控制 - 右侧放正文/项目/视频：对应设为
70%或minmax(600px, 70%) - 避免用
auto或fit-content()，它们在不同浏览器中行为不一致，尤其在 Safari 中易导致列宽压缩
@media 切单栏时的关键细节
只改 grid-template-columns: 1fr 不够，还得检查 gap 和 padding 是否在小屏下造成横向溢出。
- 务必用
@media (max-width: 768px)而不是767px，避免某些设备因四舍五入导致断点失效 - 如果用了
gap: 2rem，小屏下建议同步降为gap: 1.25rem，否则窄屏内容两侧留白过大 - 不要在单栏模式下保留左侧栏的固定宽度类名（如
.sidebar），否则可能触发意外的 min-width 限制
真正难的不是写出来，而是让左右两栏在不同内容量、不同字体渲染、不同缩放比例下都保持视觉平衡——这需要把 grid 当作布局骨架，而不是样式补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
