17370845950

单列布局首选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 容器里硬调——列数、间距、断点会互相干扰。

正确做法是按内容区块切分容器，各自独立布局：

.he
ro { 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 更利性能

复杂点不在代码多寡，而在什么时候该舍弃“看起来一样”，转而服务真实使用场景。