单列布局首选max-width+margin:0 auto居中，兼容IE8；双列用Grid配minmax(0,1fr)防拉伸，加gap替代margin；混排需语义化分容器；移动端侧边栏应视觉隐藏而非display:none。
单列布局用 max-width + margin: auto 最稳
别一上来就套 Flex 或 Grid，纯内容型页面（比如文章页、说明页）用传统块级居中更轻量、兼容性更好。关键不是“多酷”，而是“不崩”。max-width 控制宽度上限，margin: auto 实现水平居中，浏览器支持从 IE8 起就没问题。
常见错误是只设 width: 800px，结果在小屏上横向滚动；或忘了加 box-sizing: border-box，导致 padding 把宽度撑爆。
-
max-width: 768px是较安全的断点，兼顾平板与桌面阅读舒适度 - 外层容器必须设
margin: 0 auto，不能只写margin: auto（IE 下可能失效） - 记得全局重置：
* { box-sizing: border-box; }
双列布局优先选 display: grid，用 grid-template-columns 明确分栏
如果主内容+侧边栏结构固定（比如博客正文+目录/标签），Grid 比 Float 或 inline-block 更可控。不用操心清除浮动，也不用 hack 垂直对齐。
典型坑是直接写 grid-template-columns: 1fr 300px 却没限制容器宽度——结果在超宽屏上，1fr 拉得太开，阅读体验断裂。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
grid-template-columns: minmax(0, 1fr) 300px，左侧弹性但不无限膨胀 - 加
gap: 24px替代 margin，避免子元素外边距合并问题 - 响应式降级：用
@media (max-width: 768px)把双列改成grid-template-columns: 1fr
单列+双列混排时，用语义化容器隔离布局逻辑
一个页面既有全宽 Banner（单列），又有正文+侧边栏（双列），还有底部单列 CTA，不能全塞进一个 Grid 容器里硬调——列数、间距、断点会互相干扰。
正确做法是按内容区块切分容器，各自独立布局：
.hero { max-width: 1200px; margin: 0 auto; padding: 2rem; }
.main-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.footer { max-width: 768px; margin: 2rem auto; text-align: center; }每个容器只管自己那块的布局职责，互不越界。这样改 Banner 高度不影响侧边栏，换侧边栏宽度也不用动 footer 样式。
移动端双列塌陷后，侧边栏默认隐藏比强行堆叠更合理
很多教程教你怎么把侧边栏“挪到主内容下面”，但实际产品中，小屏下用户真正需要的是快速读正文，而不是翻三屏找目录。保留可选展开更务实。
别用 display: none 粗暴隐藏——会导致 JS 获取不到元素、SEO 丢失内容。用视觉隐藏更稳妥：
- 加类名
sidebar--hidden-mobile，CSS 写position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; - 用
aria-hidden="true"配合，保证无障碍访问一致性 - 按钮触发显示时，用
transform: translateX(0)动画，比opacity更利性能
复杂点不在代码多寡，而在什么时候该舍弃“看起来一样”，转而服务真实使用场景。
