CSS Grid 是实现双栏布局最可控、语义清晰且响应式省心的方式，推荐用 grid-template-columns: 30% 70% 定义，避免 float、table 或混合单位；小屏用 @media (max-width: 768px) { grid-template-columns: 1fr; } 切单栏，并重置 gap 与 print 样式。
用 CSS Grid 实现双栏布局，是当前最可控、语义最清晰、响应式最省心的方式。别碰 float、display: table 或硬编码 width 百分比加 margin 的老套路——它们要么难维护，要么塌陷风险高，要么在小屏下直接失效。
grid-template-columns: 30% 70% 是最直白的双栏定义方式
这行代码明确告诉浏览器：把容器分成左右两列，左列占容器宽度的 30%，右列占 70%。它不依赖内容撑开，不靠浮动清空，也不需要额外 wrapper 元素。
-
30%和70%是视觉权重分配，不是绝对像素，适配缩放和不同屏幕 - 百分比写法兼容所有支持 Grid 的浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）
- 避免用
200px 1fr这类混合单位——左侧固定宽在小屏下容易溢出，且无法随字体缩放等比例变化 - 如果希望左侧最小宽度可控、右侧弹性伸缩，可改用
minmax(240px, 30%) 1fr
@media 查询切单栏时必须重置 grid-template-columns
小屏下双栏强行并排会导致横向滚动或内容挤压，@media (max-width: 768px) 是常见断点，但关键在于重置列定义，而不是只改 padding 或 font-size。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须写
grid-template-columns: 1fr，不能只写display: block——Grid 容器不会因 display 变化自动退化为普通流 - 别漏掉
gap的响应式调整：gap: 2rem在手机上可能过大，可同步设为gap: 1rem - 若左右栏 DOM 顺序和视觉顺序不一致（比如 HTML 中右栏在前），可用
grid-column调整显示位置，但会增加维护成本，优先保持语义顺序一致
别用 flex 做双栏除非你明确要高度对齐
Flexbox 默认 align-items: stretch，会让左右两栏强制等高。简历、文档页这类内容长度天然不均的场景下，等高反而显得生硬、留白怪异。
- 若坚持用 Flex，必须显式加
align-items: flex-start，否则右侧短内容会被拉长，左侧头像或技能标签下方堆满空白 -
flex: 0 0 30%比width: 30%更稳——它禁用缩放（flex-shrink: 0），防止内容多时被压缩变形 - Flex 不支持跨行/跨列，后续想加“标题横跨双栏”或“侧边栏底部通栏广告”就得绕路，Grid 用
grid-column: 1 / -1一行搞定
打印样式里 grid-gap 会变成白边，需单独处理
很多开发者忽略打印预览，结果简历 PDF 导出后左右栏之间出现大片空白。CSS Grid 的 gap 在 print 媒体中默认照常渲染，但纸张没有“视口缩放”，单位换算易失真。
- 建议在
@media print中重置：gap: 0; padding: 0.5rem;，用 padding 替代 gap 控制间距更可靠 - 避免在 Grid 容器上设
margin或padding来模拟 gap，否则 print 下 margin 可能被截断或加倍 - 如果用了
grid-template-areas，打印时某些浏览器（如旧版 Safari）可能忽略 area 命名，稳妥起见仍以grid-column为布局主控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
