双栏布局关键在于语义与视觉权重协同导出信息层级：用和明确内容主次，CSS Grid控制布局不依赖HTML顺序，配合留白、字号、行高差异强化视觉动线，响应式按内容密度而非设备尺寸触发。
主次分明的双栏布局，关键不在“分两栏”，而在用语义和视觉权重把信息层级自然导出来。纯靠 float 或 display: inline-block 硬挤，容易导致结构松散、响应断裂、可访问性差。
用 main 和 aside 明确语义角色
浏览器和屏幕阅读器会按语义理解内容优先级，main 默认代表页面核心内容，aside 表示附属、补充或上下文信息。这种标记本身就在告诉用户“左边是重点，右边是参考”。
常见错误是全用 div 加 class 模拟，比如 <div class="sidebar"> —— 这对 SEO 和辅助技术几乎不传递任何结构意义。
<p>实操建议：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>主内容区必须包裹在 <code><main></main> 标签内，且一个页面只出现一次
<aside></aside>，不要用 <section></section> 或 <nav></nav> 替代（除非它确实是导航）aside 语义完全匹配CSS Grid 控制宽度与顺序，不依赖 HTML 顺序
Grid 的 grid-template-areas 和 order 属性能让你在视觉上把主栏放左、侧栏放右，同时保持 HTML 中 main 在前——这对 SEO 和加载优先级更友好。
例如：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.layout {
display: grid;
grid-template-areas: "main aside";
grid-template-columns: 2fr 1fr;
}
main { grid-area: main; }
aside { grid-area: aside; }
注意：别用 float 做双栏，它已废弃；也别用 display: flex 强行撑满，flex 容器内子项默认不换行，一旦内容超宽就横向溢出，且无法单独控制列宽比例。
响应式断点要按内容密度，不是设备尺寸硬切
很多项目写 @media (max-width: 768px) 就收成单栏，结果在 iPad mini 上仍显示双栏却挤得看不清文字。真正该判断的是“当前容器内，主栏是否还能容纳两行以上段落+一张图”。
推荐做法：
- 用
min-width而非max-width设置双栏启用条件，比如@media (min-width: 640px) - 主栏设
min-width: 30rem，侧栏设min-width: 14rem，再用grid-template-columns: minmax(30rem, 2fr) minmax(14rem, 1fr)) - 在窄屏下直接让
aside出现在main下方，而不是隐藏——隐藏会丢失信息，下方排列仍保有语义完整性
视觉权重必须靠留白和字体节奏强化，不能只靠颜色
即使结构和布局都对了，如果主栏文字和侧栏文字用同一字号、同一行高、同样边距，用户一眼扫过去还是分不清哪边更重要。
简单但有效的三点：
- 主栏正文用
font-size: 1.125rem，行高line-height: 1.6；侧栏用font-size: 0.9375rem，行高line-height: 1.4 - 主栏左右留白至少
1.5rem，侧栏左右留白缩到0.75rem，制造“呼吸感差异” - 侧栏顶部加一条浅灰分割线（
border-top: 1px solid #eee），但主栏不加——用边界暗示“这是附着物，不是主体延伸”
最后提醒一句：双栏不是目的，信息动线才是。测试时关掉 CSS，只看 HTML 结构是否还能读出“先看什么、后看什么”，这比任何视觉效果都重要。
