grid容器上break-inside: avoid无效，必须为每个grid-item及内部块级子元素显式设置；打印时应禁用fr、gap、position和transform，改用px/%、margin及break-before: page。
break-inside: avoid 加在 grid 容器上完全无效
浏览器分页机制只检查块级子元素是否允许断开，而 grid-item 默认是 display: grid-item，既不是块级，也不继承父容器的分页控制。你写 .grid { break-inside: avoid; }，等于没写。
必须把 break-inside: avoid 显式加到每个 grid-item 元素上；如果 item 内还有 、
- 错误做法：
.card { break-inside: avoid; }（但 .card 是 grid 容器的直接子项，且内部有） - 正确做法：
.card, .card > p, .card > ul { break-inside: avoid; } - 必须包裹在
@media print中，否则屏幕渲染也会受影响
fr 单位在打印中计算结果不可靠
fr 依赖“可用空间”动态计算，而打印媒体的可用高度由纸张尺寸、边距和驱动返回值共同决定，不同打印机/驱动可能返回差异极大的 height 值。结果就是：屏幕上 1fr 2fr 排得好好的，打印时一个变 0px，另一个撑满整页。
- 打印样式中必须放弃
fr，改用px或% - 用百分比时，记得给网格容器设明确
height（如height: 80vh），否则%无效 - 避免
minmax(1fr, max-content)这类混合写法——fr部分在@media print中基本失效
grid-area 在 print 媒体中单独重写不生效
grid-area 不是独立生效的属性，它依赖当前作用域的 grid-template-areas 定义。只在 @media print 里写 .header { grid-area: header; }，而没同步重定义容器的 grid-template-areas，浏览器会直接忽略该声明。
- 想让打印时变成单列布局，要配对修改：
grid-template-areas: "header" "main" "footer"; - 然后分别设置
.header { grid-area: header; }、.main { grid-area: main; }等 - 未声明的
grid-area名称在 print 下不会 fallback，会退回到文档流顺序
gap 和定位元素会让 break-inside 失效
这不是配置写错了，而是 CSS 规范层面的硬性限制：gap 本身不触发分页，但会放大物理间距——前一个 grid-item 刚好卡在页尾时，gap 可能把下一个整体推到下一页；position: absolute、transform、overflow: hidden 也会让 break-inside 彻底失效。
- 打印样式中建议关闭
gap：gap: 0;，改用margin-bottom控制间距 - 避免在
grid-item上使用position: absolute或transform - 若 item 内容本身高度超过单页（比如长表格或大图），
break-inside: avoid无法阻止截断——此时得用break-before: page强制另起一页
最常被忽略的一点：CSS 分页控制只管“在哪断”，不管“能不能放得下”。当内容高度超出单页可用空间，再严格的 break-inside 也无能为力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
