真正可用的双栏布局必须显式定义 grid-template-columns（如 1fr 1fr 或 250px 1fr），否则 grid-column 定位静默失效；需配合 @media 切单栏、gap 控制间距、避免百分比与 fr 混用，并在 print 媒体中重置为 1fr。
直接用 grid-template-columns: 30% 70% 就能实现双栏，但小屏会溢出、打印错乱、语义混乱——真正可用的方案必须带 @media 切单栏 + 显式轨道定义 + 无浮动干扰。
为什么 grid-column: 1 / 3 在双栏里没反应
不是写错了，是网格线根本没生成。双栏布局必须先定义两列轨道，否则所有 grid-column 定位都静默失效。
- 检查是否漏了
grid-template-columns: 1fr 1fr或30% 70%—— 没这句，display: grid只是开了上下文，不自动建列 - 移动端常见误写
grid-template-columns: 1fr（只有一列），此时1 / 3跨越不存在的第3条线，浏览器 fallback 成1 / 2，视觉上“没效果” - 临时加
border: 1px solid #000到容器上，看是否有两列被渲染出来，比查控制台更直观
grid-template-columns 的安全写法
百分比和 fr 混用、硬写像素值，在窄屏下极易导致内容挤出或留白失控。
- 简历/侧边栏类双栏：用
grid-template-columns: 250px 1fr—— 左栏固定最小可用宽度，右栏吃掉剩余空间，比30% 70%更稳 - 响应式卡片或内容对等双栏：用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))，小屏自动切单列，大屏铺满无空隙 - 绝对避免
50% 1fr这类混用：百分比基准是父容器宽度，1fr是剩余空间，二者计算逻辑冲突，Safari 和旧版 Chrome 可能渲染异常
gap 替代 margin 的实操细节
给每个网格项加 margin-right 或 margin-bottom 是过时做法，会导致最后一行多出空白、缩放错位、打印时间距丢失。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 统一用容器级
gap: 1.5rem（不是grid-gap，已废弃）控制项目间空隙 -
gap不影响外边距，想让整个网格离顶部/底部有空隙？单独给容器加padding-top和padding-bottom - 某项目用了
position: absolute？它脱离网格流，不参与gap计算，但其他项目间距照常
小屏切单栏必须加 @media，不能靠 flex-direction 补救
Grid 的响应式切换必须靠媒体查询重写 grid-template-columns，用 flex-direction: column 混搭 Grid 是无效的。
- 正确写法：
@media (max-width: 768px) { .resume { grid-template-columns: 1fr; } } - 别信“加个
flex就能兼容”的说法 —— Grid 容器内再套 Flex 子项，只会增加层叠复杂度，且无法保证打印样式一致 - 打印适配常被忽略：在
@media print里也补一句grid-template-columns: 1fr，避免双栏内容被截断
真正难的不是写出双栏，而是确保它在 iOS Safari 打印预览里不换行、在 320px 屏上不横向滚动、在嵌入 iframe 后仍保持语义结构 —— 这些都得靠显式轨道定义 + 纯 Grid 思维，而不是拿 Flex 去“修”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
