grid-template-areas在@media print中完全不生效，因打印引擎按规范跳过命名区域映射，子元素退化为block流；必须改用grid-column/grid-row显式定位，并重写grid-template-columns/grid-template-rows等全部相关属性。
为什么@media print里的grid-template-areas完全不生效
Chrome、Edge、Firefox 的打印引擎压根不解析 grid-template-areas，这不是 bug，是规范限制——命名区域映射在分页上下文中被跳过。你写 grid-area: header，打印时它就当没这回事，子项退化成 block 流布局，位置全乱。
必须改用显式行列定位：grid-column 和 grid-row 是唯一能稳住位置的属性。例如跨整行得写 grid-column: 1 / -1，别用 span 2；起始行写 grid-row: 2，而不是依赖隐式线编号。
-
grid-template-columns和grid-template-rows必须在@media print中重新声明，哪怕只是grid-template-columns: 1fr - 删掉
justify-items、align-content等对齐属性，它们在打印中基本被静默忽略 - 避免
grid-auto-flow: row这类自动推导行为，打印引擎不认
如何防止 grid-item 被分页截断在两页之间
break-inside: avoid 必须加在每个直接子项上，不是加在 grid 容器上。容器加了等于没加，因为 display: grid 不会让这个属性继承到子项。
比如卡片列表，每个 .card 都要单独加：.card { break-inside: avoid; }。如果卡片内部还有 <p></p> 或 <ul></ul>，它们也得各自加一遍。
- Safari 16.4 及更早版本不支持
break-inside作用于 grid 子项，得降级：display: block; page-break-inside: avoid; -
overflow: hidden、transform、position: absolute会直接让break-inside: avoid失效 - 超长内容（如大图、长表格）仍可能被截断，这时要用
break-before: always强制另起一页
gap 在打印时导致“多出一页”是怎么回事
gap 本身不触发分页，但它会放大物理间距。当上一个 item 刚好卡在页尾，gap 就可能把下一个 item 整体推到下一页——看起来像“凭空多一页”。
在 @media print 中必须关闭 gap：gap: 0;，再用 margin-bottom 或 padding-bottom 控制视觉间隙。例如：margin-bottom: 12px; 替代 row-gap: 12px;。
- 预估单页可用高度（A4 纵向约 900px，减去上下边距），确保 item 总高 + 间隔总和 ≤ 可用高度
- 别指望
gap在打印中保持屏幕效果，它在不同浏览器里渲染差异极大 - 若必须保留列间空隙，用
grid-column-gap: 0; padding-right: 8px;更可控
打印样式不是微调，而是重写
别幻想屏幕上的 display: grid 会自动带上所有行为。打印样式是全新上下文：从 grid-template-columns 到每个子项的 grid-column，都得在 @media print 里重新声明。漏掉任意一项，就可能回退到不可控的默认流。
最常被忽略的一点：你写的 @media print 规则可能根本没加载。检查 <link rel="stylesheet" media="print"> 的 media 值是否拼错（必须是 print，大小写敏感），并在 DevTools Network 面板确认 CSS 文件状态是 200 而非 304（缓存干扰）。
真实场景中，用户可能用旧版 Safari 打印，或 PDF 导出工具（如 wkhtmltopdf）根本不支持 Grid。所以别只押注 Grid —— 在 @media print 里提供 flex 或 table 降级方案，才是稳妥做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
