打印时Grid双栏错位因浏览器打印引擎不支持fr/minmax()等现代特性，必须在@media print中降级为float/width布局并禁用干扰属性。
打印时双栏错位、内容被截断、列宽崩坏——不是 CSS 写错了，而是浏览器打印引擎根本不认 grid-template-columns 里的 fr 和 minmax()。必须在 @media print 中彻底降级布局逻辑。
为什么 Chrome/Firefox 打印预览里 Grid 双栏全乱了
打印引擎（尤其是 Chromium 的 PDF 导出模块）对现代 Grid 特性支持极弱：fr 单位被忽略，gap 不渲染，grid-area 命名区域失效，auto-fit 直接退化为单列。它只认“块级流 + 显式宽度 + 静态定位”这套老规则。
-
@media print必须单独写，不能和屏幕样式混在同一个<style></style>块里，否则容易被更高优先级的通用规则覆盖 - 不要依赖
display: grid在打印时维持列结构；所有双栏容器都得显式设为display: block - 用
width+float或inline-block模拟左右栏，比指望打印引擎解析 Grid 更可靠
双栏打印适配的最小可行代码模板
假设你原本用 Grid 实现了 30%/70% 双栏简历：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.resume {
display: grid;
grid-template-columns: 30% 70%;
gap: 2rem;
}
对应打印样式必须这样写：
立即学习“前端免费学习笔记（深入）”；
@media print {
.resume {
display: block;
}
.sidebar {
width: 30%;
float: left;
margin-right: 2rem;
}
.content {
width: 68%;
float: left;
}
/* 清除浮动，防后续内容塌陷 */
.resume::after {
content: "";
display: table;
clear: both;
}
/* 禁用所有可能干扰打印的属性 */
* {
box-sizing: border-box;
page-break-inside: avoid;
}
}
- 不用
flex：打印引擎对flex-wrap和align-items支持更差 - 不用百分比小数（如
69.5%），取整并预留margin防止四舍五入溢出 - 每个双栏模块都要加
page-break-inside: avoid，避免工作经历被硬生生劈成两页
表格类双栏（如技能对照表）怎么保结构不崩
如果双栏中嵌了 <table>（比如「技能名称｜掌握程度」），打印时表头消失、列宽错乱是高频问题。<ul><li>给 <code><table> 加 <code>page-break-inside: avoid，防止跨页断裂
table-layout: fixed，再配合 width: 100% 和 border-collapse: collapse
<table> 的 <code>display: flex 或 display: grid 父容器——它们在打印时会直接失效，反而导致表格撑破容器<thead> 必须用 <code>display: table-header-group（部分引擎需要显式声明）真正容易被忽略的是：打印预览 ≠ 页面渲染。所有调整必须在 Chrome / Edge 的“打印预览”里实时验证，而不是靠肉眼估算或等 PDF 输出后再改。哪怕只是改了一个 margin 值，也要重新触发预览刷新——因为打印样式表的加载和计算是惰性的，缓存行为比屏幕样式更隐蔽。
