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; }，等于没写。

• 即使子项是
  ，只要父容器是 display: grid，该

  就以 grid-item 身份参与布局，break-inside 不会穿透上下文生效
• 如果 item 内还有
  或
  ，它们也得各自加 break-inside: avoid，否则断点会退到段落中间
• Chrome/Firefox 支持良好；Safari 16.4+ 才真正支持该属性在 grid-item 上的行为，旧版 Safari 会直接忽略

如何在 @media print 中安全启用分页控制

必须用 @supports 隔离规则，不能直接写死 break-inside，否则旧浏览器可能误解析或丢弃整条规则。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 正确写法是：在 @media print 内嵌套 @supports (break-inside: avoid) 和 @supports not (break-inside: avoid)
• 降级目标必须是 page-break-inside: avoid，且作用对象仍要是块级元素（如 .card > p）
• 所有相关元素需显式声明 display: block 或包裹在语义化块级标签中（如
  ），否则 page-break-inside 也不生效
• 避免与 overflow: hidden、transform、position: absolute 同时存在——这些会让 break-inside 失效

哪些 Grid 特性在打印中必须禁用或替换

fr 单位、gap、grid-template-areas 在打印媒体中行为不可靠，不是配置问题，而是规范层面的硬性限制。

• 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，否则打印时消失

字体、边框与内容高度的隐藏陷阱

打印输出依赖物理尺寸，很多屏幕端“看起来没问题”的写法，在 PDF 导出或真实打印机上会彻底失效。

• 字体必须用 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 拆分内容