break-inside: avoid 必须加在每个 grid-item 元素上，加在容器上无效；需配合 @supports 隔离、禁用 fr/gap/absolute、使用 pt 单位和 0.5px 边框，并注意内容超页时需 break-before: page。
break-inside: avoid 必须加在每个 grid-item 元素上，加在容器上完全无效——这是绝大多数人踩坑的起点。
为什么给 grid 容器加 break-inside 没用
浏览器分页机制只检查块级子元素是否允许断开，而 grid-item 默认是 display: grid-item，既不是块级，也不继承父容器的分页控制。你写 .grid { break-inside: avoid; }，等于没写。
- 即使子项是
<div>，只要父容器是 <code>display: grid，该<div> 就以 <code>grid-item身份参与布局，break-inside不会穿透上下文生效 - 如果 item 内还有
<p></p>或<ul></ul>，它们也得各自加break-inside: avoid，否则断点会退到段落中间 - Chrome/Firefox 支持良好；Safari 16.4+ 才真正支持该属性在
grid-item上的行为，旧版 Safari 会直接忽略 - 正确写法是：在
@media print内嵌套@supports (break-inside: avoid)和@supports not (break-inside: avoid) - 降级目标必须是
page-break-inside: avoid，且作用对象仍要是块级元素（如.card > p） - 所有相关元素需显式声明
display: block或包裹在语义化块级标签中（如<p></p>），否则page-break-inside也不生效 - 避免与
overflow: hidden、transform、position: absolute同时存在——这些会让break-inside失效 -
grid-template-rows: 1fr 2fr必须换成150px 300px或30% 70%（后者需同时设容器height） -
gap本身不触发分页，但会放大物理间距——前一个 item 刚好卡在页尾时，gap可能把下一个整体推到下一页。建议在打印样式中设gap: 0，改用margin-bottom控制间距 -
grid-area名称在@media print中单独修改无效，必须同步重定义grid-template-areas - 绝对定位元素（如右上角章）必须用
position: relative+top/right替代position: absolute，否则打印时消失 - 字体必须用
pt单位（如font-size: 10pt），rem、%、px都会导致缩放失真或误差累积 - 细边框必须用
border: 0.5px solid #000，1px在高 DPI 打印机上会渲染成 2 物理像素，导致模糊；outline和box-shadow在 PDF 导出时大概率丢失 -
break-inside: avoid不是银弹：当 item 内容本身高度超过单页（比如一张大图或长表格），它依然会被截断。此时需配合break-before: page强制另起一页，或提前用 JS 拆分内容
如何在 @media print 中安全启用分页控制
必须用 @supports 隔离规则，不能直接写死 break-inside，否则旧浏览器可能误解析或丢弃整条规则。
哪些 Grid 特性在打印中必须禁用或替换
fr 单位、gap、grid-template-areas 在打印媒体中行为不可靠，不是配置问题，而是规范层面的硬性限制。
立即学习“前端免费学习笔记（深入）”；
字体、边框与内容高度的隐藏陷阱
打印输出依赖物理尺寸，很多屏幕端“看起来没问题”的写法，在 PDF 导出或真实打印机上会彻底失效。
