grid打印错位是因浏览器忽略grid-template-areas、fr和float等属性，须重写而非微调：需显式声明grid-template-columns/rows、用线号定位（如grid-column:1/-1）、给每个子项加break-inside:avoid，并禁用fr与gap。
Grid 在打印时错位，不是你 Grid 写得不规范，而是浏览器压根不按你写的 grid-template-areas、fr 单位或 float 逻辑渲染——它直接忽略，退化为无序块级排列。必须重写打印样式，不能微调。
为什么 grid-template-areas 在 @media print 中完全失效
Chrome、Edge、Firefox 的打印引擎不解析命名区域映射。grid-area: header 在打印中等于未定义，不会 fallback 到文档流，而是让元素失去位置语义，变成堆叠的 display: block 元素。
- 必须显式声明
grid-template-columns和grid-template-rows，哪怕只是grid-template-columns: 1fr - 改用线号定位：
grid-column: 1 / -1（跨整行）、grid-row: 2（起始行），禁用span 2这类隐式写法 - 不要在
@media print里复用屏幕端的grid-template-areas值；如果真要保留语义，可简化为单列布局："header" "main" "footer"，但依然要配上线号定位才真正生效
break-inside: avoid 加在哪才防分页切断
加在 Grid 容器上等于没加。打印分页机制对容器无感知，只检查每个子项是否允许被切断。
- 必须给每个直接子项（如卡片、报表行）加：
.card { break-inside: avoid; } - 若子项内含
<p></p>、<ul></ul>等内容块，它们也得单独加break-inside: avoid - Safari 16.4 以下不支持该属性作用于
grid-item，需降级：display: block; page-break-inside: avoid; -
overflow: hidden、transform、position: absolute会直接让break-inside失效，打印样式中应清空这些声明
fr 单位和 gap 在打印中为什么制造空白页
fr 在打印中计算极不可靠：可能算成 0px、撑满整页，或让百分比失效；gap 本身不触发分页，但物理间距放大后，容易把下一个 item 整体推到下一页。
- 放弃
fr：用px或带明确父高前提下的%，例如grid-template-rows: 120px 70%（前提是容器有固定height） -
@media print中关闭gap：gap: 0;，改用margin-bottom或padding-bottom控制间距 - 若需视觉间隙，可用
grid-row-gap: 0; margin-bottom: 12px;替代 - 预估单页可用高度（A4 纵向约 900px，减去上下边距），确保 item 总高 + 间隔 ≤ 可用高度
表格嵌套在 Grid 里打印错乱，怎么连根解决
90% 的表格右侧截断、列宽错乱，源于组件库（如 Element UI）默认的 table-layout: fixed，而打印引擎无法正确计算其列宽。
- 先清浮动父容器：
.sidebar, .ad-banner { float: none !important; clear: none !important; } - 再重写表格：
table { table-layout: auto !important; width: 100% !important; } -
colgroup在打印中基本被忽略，改用tbody tr:first-child td { min-width: 120px; white-space: nowrap; } - 避免单独给
th设width——打印中常失效；统一控制td的min-width - 如果表格是 Grid 子项，确保它自身也加了
break-inside: avoid，否则长表格仍会被硬切
最易被跳过的一步：打印样式不是“屏幕样式的补充”，而是独立布局层。从 display: grid 到每个 grid-column，都得在 @media print 里重新声明——漏掉任意一个，错位就可能发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
