打印时网格容器被截断的主因是浏览器分页机制不感知grid布局，需为每个grid-item设break-inside: avoid、禁用fr单位、重定义grid-template-areas并重置gap。
打印时网格容器被截断在页面中间
浏览器默认不会为 display: grid 容器做分页保护，内容可能被硬生生切成两半——上半页留几个 grid-item，下半页突然从中间开始渲染。这不是 bug，是 CSS 分页机制对 flex/grid 这类“格式化上下文边界”缺乏原生感知。
解决思路不是强行撑高容器，而是用分页控制指令告诉浏览器：“这里允许断，但别在格子中间断”。
- 给每个
grid-item加break-inside: avoid（注意：不是加在 grid 容器上） - 如果 item 内部还有段落或列表，它们也得各自设
break-inside: avoid，否则断点会退回到子元素内部 - Chrome 和 Firefox 支持良好；Safari 16.4+ 才完整支持
break-inside在 grid item 上的行为，旧版 Safari 可能忽略
grid-template-rows 使用 fr 单位导致打印高度失控
fr 是弹性单位，依赖可用空间计算，而打印媒体的“可用空间”由纸张尺寸和边距决定，且不同打印机/驱动返回的 height 值可能不一致。结果就是：屏幕上看得好好的布局，一打印，1fr 可能被算成 0px 或撑满整页。
打印样式中必须放弃 fr，改用绝对或相对确定的单位。
立即学习“前端免费学习笔记（深入）”；
- 把
grid-template-rows: 1fr 2fr换成grid-template-rows: 150px 300px或grid-template-rows: 30% 70% - 百分比值以网格容器自身高度为基准，所以记得给容器设明确
height（如height: 80vh），否则百分比无效 - 避免用
minmax(1fr, max-content)这类混合写法——fr部分在 print media 中基本失效
@media print 中 grid-area 名称失效
当在 @media print 里重写 grid-area 时，如果只是写 grid-area: header;，而没在 print 样式里重新定义 grid-template-areas，浏览器会忽略这个声明。grid-area 不是独立属性，它依赖于当前作用域的 template 定义。
想在打印时调整区域顺序或合并，必须同步更新模板结构。
- 不要只改单个 item 的
grid-area，要配对修改容器的grid-template-areas - 例如屏幕用三栏：
"header header header" "nav main aside"，打印时可改为："header" "main" "footer"，然后对应设置各 item 的grid-area - 注意：CSS 中未声明的
grid-area名称在 print 下不会 fallback，会直接退回到文档流顺序
gap 在分页时产生意外空白
gap 本身不触发分页，但它会让相邻 grid item 的物理间距变大，一旦前一个 item 刚好卡在页尾，后面的 gap 就可能把下一个 item 推到下一页——看起来像“多出一页空白”。更隐蔽的是，某些 PDF 打印驱动会把 gap 渲染为不可压缩的空白块。
打印样式中应显式重置 gap，并优先用 margin 替代逻辑间距控制。
- 在
@media print中写gap: 0，哪怕屏幕用gap: 1rem - 需要间距时，改用
margin-bottom控制 item 之间距离，这样分页时 margin 可被折叠或压缩 - 如果必须保留视觉间隙，用
border-bottom+padding-bottom组合，比 gap 更可控
最麻烦的不是写不对，而是你改了 grid-template-rows，却忘了同步检查 break-inside 是否还生效——这两者不联动，但共同决定最终分页效果。打印预览里看不出问题，等 PDF 出来才看到第三页开头缺了一块，就得回头逐层核对。
