CSS Grid 是实现两栏自适应的主流且可控方案，通过 display: grid 和 grid-template-columns（如 minmax(200px, 25%) 1fr）定义侧边栏与主内容区，并配合 min-width 媒体查询实现响应式堆叠。
用 CSS Grid 实现两栏自适应，主流且可控
Grid 是目前最直接、最可靠的两栏自适应方案，不需要浮动或负 margin，响应式也容易控制。关键在于定义容器为 display: grid，并用 grid-template-columns 划分主次区域。
- 主内容栏设为
flex: 1或直接用1fr，侧边栏固定宽度（如240px）或设为minmax(200px, 25%)保最小宽、不撑爆 - 避免写死
grid-template-columns: 240px 1fr—— 这样小屏下侧栏会被强制压缩；改用grid-template-columns: minmax(200px, 25%) 1fr更稳妥 - 若需在移动端堆叠成单列，加媒体查询：
@media (max-width: 768px) { .container { grid-template-columns: 1fr; } }
Flexbox 方案要注意 order 和 flex-basis 的陷阱
Flexbox 也能做两栏，但容易因 order 值或未设 flex-basis 导致错位或换行异常，尤其在 Safari 中表现不稳定。
- 侧边栏必须显式设置
flex-basis: 240px（不能只靠width），否则 Flex 容器可能忽略它 - 主内容栏用
flex: 1，但注意：如果主内容里有min-width超过剩余空间，会触发横向滚动——得加min-width: 0破坏 shrink 限制 -
order可用于 DOM 顺序与视觉顺序分离（比如侧边栏 HTML 写在后面但要显示在左），但别依赖它做核心布局逻辑，兼容性差
float + calc() 方案已过时，仅用于兼容 IE11
除非项目明确要求支持 IE11，否则不要用 float。它需要清除浮动、计算宽度易出错，而且无法真正“自适应”——calc(100% - 240px) 在缩放或字体放大时可能失效。
- 若真要用，侧栏必须
float: left，主栏加overflow: hidden触发 BFC 防止文字环绕 -
calc()里的单位必须一致：写calc(100% - 240px)没问题，但calc(100% - 24rem)会导致 Safari 旧版解析失败 - IE11 不支持
calc()在width以外的属性中使用，所以max-width: calc(...)会直接被忽略
响应式断点选哪个值？别迷信 768px
断点不是固定值，而是由内容决定的。很多项目盲目套用 768px，结果平板横屏时两栏挤在一起，而大屏手机竖屏却堆叠了。
立即学习“前端免费学习笔记（深入）”；
- 先写桌面端布局，然后不断缩小浏览器窗口，观察内容何时“撑不开”或“阅读困难”，那个宽度就是你的断点
- 常见真实断点有
640px（iPhone SE 宽度）、834px（iPad mini 横屏）、1024px（部分 Surface 设备） - 用
min-width而非max-width写媒体查询更利于渐进增强，例如：@media (min-width: 834px) { ... }
两栏自适应真正的难点不在代码本身，而在如何定义“自适应”的边界——是按设备？按内容？还是按用户行为？写死一个断点或一种布局模式，迟早会撞上例外场景。
