Grid项打印被切断主因是break-inside未作用于每个grid-item自身，而误加在容器上；必须为每个子项及内部段落单独声明该属性，并配合@media print使用，避免与overflow、transform等冲突。
Grid 项在打印时被切断，不是布局写错了，而是 break-inside 没加对位置——它必须作用于每个 grid-item 元素自身，而不是容器。
为什么给 grid 容器加 break-inside: avoid 没用
浏览器在分页时只检查“块级元素是否允许断开”，而 grid 容器本身是块级，但它内部的子项默认是 display: grid-item（非块级），不受父容器的 break-inside 影响。你加在容器上，等于没加。
- 常见错误：写
.grid { break-inside: avoid; }—— 完全无效 - 真实生效点：每个卡片、每张报表行、每个
<article></article>都得单独声明 - 如果 item 内还有
<p></p>或<ul></ul>，它们也得各自加break-inside: avoid，否则断点会退到段落中间
break-inside: avoid 在 Grid 中的兼容性底线
Chrome 和 Firefox 支持稳定；Safari 16.4+ 才真正支持该属性在 grid-item 上的行为，旧版 Safari 会直接忽略。不能靠它兜底，得配合 fallback。
- 必须搭配
@media print使用，否则屏幕渲染也会受干扰 - 避免和
overflow: hidden、transform、position: absolute同时存在——这些会让break-inside失效 - 若 item 高度动态（如内容行数不确定），
break-inside: avoid可能导致空白页：浏览器宁可留白也不切断，需预估最小高度并设min-height
如何与 gap 和分页逻辑共存
gap 本身不触发分页，但它放大了物理间距。一旦前一个 item 刚好卡在页尾，后面的 gap 就可能把下一个 item 推到下一页——看起来像“多出一页空白”。
- 打印样式中建议将
gap降级为margin，例如：grid-column-gap: 0; margin-bottom: 12px; - 更稳妥的做法：在
@media print中直接关闭gap，改用padding控制内边距 - 如果必须保留
gap，请确保所有 item 的总高度 + gap 总和 ≤ 单页可用高度（A4 纵向约 900px，减去边距）
最常被忽略的一点：break-inside 不是银弹。当 item 内容本身高度超过单页（比如一张大图或长表格），它依然会被截断——此时得用 break-before 强制另起一页，或提前用 JS 拆分内容。CSS 分页控制只管“在哪断”，不管“能不能放得下”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
