最稳写法是grid-template-columns: 1fr 2fr或30% 70%，避免混用像素；用gap替代margin防折叠；响应式断点改列定义为1fr即可。
用 display: grid 做双栏布局，最稳的写法是直接定义列宽比例，不依赖浮动、float 或表格语义，也不需要手动算像素。
怎么写 grid-template-columns 才不翻车
核心就一条：用 fr 单位或百分比组合，别混用固定像素。比如左侧放个人信息、技能，右侧放经历和项目，推荐写法是：
-
grid-template-columns: 30% 70%—— 简单直接，小屏前都按比例分 -
grid-template-columns: 1fr 2fr—— 更弹性，适合内容长度差异大时，右侧自动占两倍空间 - 避免
grid-template-columns: 200px 1fr—— 左侧定宽在小屏下容易溢出，除非你明确控制了最小容器宽度
为什么 gap 比 margin 更可靠
Grid 的 gap 是容器级属性，只作用于网格项之间，不会影响子元素内部排版或触发 BFC。而用 margin 模拟间距，容易被 margin-collapse 干扰，尤其在嵌套结构里。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
gap: 2rem能同时控制行距和列距，双栏场景中只需关注列间距，可单独用column-gap: 2rem - 旧浏览器（如 IE11）不支持
gap，此时必须降级为padding+box-sizing: border-box模拟 - 如果右侧内容区域有滚动需求，
gap不会干扰overflow: auto行为，比margin更干净
响应式断点里 @media 怎么切才不卡顿
移动端切单栏不是“一刀切”，而是让 Grid 自动重排轨道，关键在断点值和列定义方式：
- 主流断点用
@media (max-width: 768px)，覆盖绝大多数手机竖屏 - 切单栏时，把
grid-template-columns改成1fr，而不是100%—— 后者在某些 Safari 版本里会失效 - 别在媒体查询里重复声明
display: grid，只改列定义即可，减少重绘开销 - 如果左侧栏有固定高度元素（比如头像），小屏下单列后建议加
align-items: start，防止空白撑高
真正难的不是写两行 CSS，而是当内容动态加载、字体加载延迟、或用户缩放页面时，双栏是否还能保持视觉平衡。这时候 fr 单位比百分比更抗干扰，而 gap 比 margin 更少触发重排——这些细节，往往在上线后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
