css grid 本身不负责打印适配，完美 a4 输出的关键在于显式设置 @page 尺寸、使用绝对单位控制网格轨道、添加 break-inside: avoid 防跨页断裂、避免不可靠的 minmax() 和相对单位，并兼顾浏览器打印特性。
直接说结论：CSS Grid 本身不负责打印适配，grid-template-columns 和 grid-template-rows 在打印媒体中会照常解析，但「完美 A4 输出」的关键不在 Grid 结构，而在页面尺寸、盒模型控制、分页行为和打印上下文的显式约束上。盲目套用屏幕布局会导致内容被截断、跨页错位、边距失控。
设置 A4 尺寸与物理单位必须显式声明
浏览器默认不把 @media print 视为 A4，即使你写了 width: 210mm; height: 297mm，若父容器或根元素没有 size 或强制尺寸，实际输出仍可能被缩放或裁切。
- 必须在
@page规则中定义尺寸：@page { size: A4; margin: 0; }（注意：部分浏览器忽略margin，需配合body的margin控制） -
body或根容器需设width: 210mm; height: 297mm;，且box-sizing: border-box，否则 padding/border 会撑出 A4 范围 - 避免使用
rem、em或百分比做关键轨道尺寸——它们依赖屏幕字体或容器宽度，在打印时不可靠；优先用mm、cm、in等绝对单位 - 示例安全写法：
grid-template-columns: 15mm 1fr 15mm;（左右留白 15mm，中间自适应）
Grid 行高与分页断裂必须主动干预
Grid 默认按内容自动分配行高，但打印时若某行内容高度超过剩余纸面空间，整行会被强行推到下一页，造成顶部大片空白——这不是 Grid 错，是 break-inside: avoid 缺失导致的。
- 对每个网格项（尤其是含文本块的）加
break-inside: avoid;，防止内容被割裂跨页 - 避免用
grid-auto-rows: minmax(40px, auto)——minmax()在打印媒体中兼容性差，Chrome 128+ 支持尚不稳定；改用固定值如grid-auto-rows: 32mm - 若需多行文本填满固定区域，不要依赖
align-content: stretch，而应设height: 100%+overflow: hidden并预估行数，否则可能溢出 - 测试分页点：在 Chrome 打印预览中按
Ctrl+P→ “更多设置” → 勾选“背景图形”，观察灰色分页线位置
gap、padding 和 border 在打印中容易被重置
多数浏览器在打印模式下会禁用 background-color、重置 color 为黑，同时部分 UA 样式会覆盖 gap 为 0，尤其当父容器未设 display: grid 显式声明时。
- 永远显式写
gap: 2mm（不用gap: 2px），并补一句row-gap: 2mm; column-gap: 2mm;提高兼容性 - 避免仅靠
padding控制内边距——打印时某些 PDF 导出工具会忽略它；用padding+ 同等border（透明）双重保险 - 所有边框必须带
print-color-adjust: exact，否则 Chrome 可能强制转灰度并丢弃细线 - 重要提示：Firefox 对
subgrid在@media print中完全不支持，若用了子网格，打印前务必用@supports not (display: grid) or (grid-template-columns: subgrid)回退为普通 Grid
最易被忽略的是：A4 打印不是“缩小屏幕布局”，而是重建一个物理介质上的排版上下文。Grid 只是容器工具，真正决定是否“完美”的，是你有没有切断屏幕思维惯性，从毫米、分页、油墨覆盖率这些真实约束出发去写规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
