响应式三栏布局应优先用grid配合minmax()与fr单位：桌面端设grid-template-columns: minmax(240px,25%) 1fr minmax(240px,25%)，确保侧栏有最小宽度且可弹性扩展；平板端单栏+左栏上移、右栏隐藏；断点需依内容实际撑开程度确定，避免硬编码设备尺寸。
用 grid 实现响应式三栏，关键在 minmax() 和 fr 单位搭配
固定宽度三栏在小屏上必然溢出，必须让中间内容区优先收缩、侧边栏有最小保护。直接写 grid-template-columns: 200px 1fr 200px 在手机上会把侧栏压成一条线甚至隐藏——这不是预期行为。
正确做法是用 minmax() 给侧栏设下限，同时允许其随容器变宽而扩展：
/* 桌面端：左右固定最小宽度，中间弹性 */
.container {
display: grid;
grid-template-columns: minmax(240px, 25%) 1fr minmax(240px, 25%);
}
<p>/<em> 平板：左侧收窄，右侧隐藏，中间占满 </em>/
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
.sidebar-left { order: -1; }
.sidebar-right { display: none; }
}注意：minmax(240px, 25%) 表示“至少 240px，最多占容器 25%”，比单纯用 240px 更健壮；order 用于调整视觉顺序，避免 DOM 重排。
用 flex 做三栏时，flex-basis 和 flex-shrink 必须显式控制
flex: 1 看似省事，但三栏都设成它会导致所有栏等宽、无主次，且小屏下全部挤压变形。真正可控的写法是明确每栏的基线与收缩策略：
立即学习“前端免费学习笔记（深入）”；
-
.main：设flex: 1 1 60%（主内容优先占宽，可缩到 60% 下限） -
.sidebar-left：设flex: 0 0 220px（不放大、不缩小、固定基线） -
.sidebar-right：同左栏，但媒体查询中设为display: none
这样在中屏（如 992px）可微调为：
@media (max-width: 992px) {
.sidebar-left, .sidebar-right {
flex: 0 0 180px;
}
.main {
flex: 1 1 50%;
}
}别依赖 flex-wrap 来“换行”三栏——那会变成上下堆叠，破坏横向信息流结构。
媒体查询断点不能只看设备尺寸，要按内容撑开程度定
写 @media (max-width: 768px) 是常见误区。实际中，有些三栏页内容多，可能在 900px 就已拥挤；有些极简设计，1200px 才需折叠。更稳妥的方式是：
- 先在桌面端调好三栏比例，观察内容何时开始换行或截断
- 用浏览器 DevTools 的「Toggle device toolbar」拖动宽度，找到文字/图片首次出现挤压的临界值
- 以此数值 ±20px 定为断点，比如
848px或1124px
另外，避免嵌套多层媒体查询。一个三栏布局通常只需 2–3 个断点：桌面（三栏）、平板（单栏+左栏上移）、手机（纯单栏）。
Grid 和 Flex 混用时，子元素的 display 会被父级覆盖
常见错误：外层用 grid，内部某个侧栏又自己设 display: flex 布局按钮组，结果按钮错位。这是因为 grid 子项的 display 值（如 inline 或 block）会被忽略，但 flex 不会自动接管其内部子元素的布局逻辑。
解决方法只有两个：
- 保持层级一致：整个三栏用
grid，内部按钮组也用grid（如display: contents配合grid-column） - 或彻底分离：三栏用
flex，侧栏内部再用flex或grid，只要不跨层混用显示模型
最易被忽略的是：当用 grid 布局三栏后，.sidebar-left 内部若含浮动元素（float: left），那些浮动会失效——grid 容器不支持传统浮动参与布局计算。
