打印时仅修改 grid-template-rows/columns 无效，必须用 grid-template-areas 或完整 grid 简写整体覆盖网格结构，并重置 grid-auto-flow，同时清除子元素的显式行列定位以避免偏移。
打印时 grid-template-rows 和 grid-template-columns 互换不生效？
直接重写 grid-template-rows 和 grid-template-columns 在 @media print 里大概率没用——CSS Grid 的行列定义是“一次性声明”，浏览器在布局阶段已固化网格轨道结构，@media 中仅修改这两个属性不会触发轨道重建。
真正起效的方式是：用 grid-template-areas 或 grid 简写属性整体覆盖网格结构。这样浏览器会重新解析整个网格定义，从而实现行列逻辑翻转。
- 别只改
grid-template-rows，它单独变无效 - 必须同时提供完整的
grid-template-areas（推荐）或grid简写（含grid-template-rows、grid-template-columns、grid-template-areas） - 如果原布局用了
grid-auto-flow: column，打印时也得显式设回row，否则子项仍按列自动填充
用 grid-template-areas 实现打印时的行列翻转
grid-template-areas 是最可控的方案：你用字符串定义区域布局，打印样式里只需把原来横向拼接的区域名，改成纵向堆叠即可，语义清晰、兼容性好（Chrome/Firefox/Edge 均支持）。
比如屏幕端是三列卡片：
立即学习“前端免费学习笔记（深入）”；
grid-template-areas: "header header header" "main main sidebar" "footer footer footer";
打印时想变成上下堆叠（header → main → sidebar → footer），就写成：
@media print {
.layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
- 区域名必须完全一致（大小写、引号、空格），否则子元素的
grid-area对不上 - 如果某区域在屏幕版中跨多行（如
"header header header"），打印版里写成单行"header"就自动变为单单元格，无需额外处理 - 未在
grid-template-areas中出现的区域名，对应元素会坍缩为 0×0，记得确保所有子元素都分配了有效grid-area
grid 简写属性在 print 中的坑
用 grid 简写（如 grid: 1fr / 1fr 1fr;）也能重定义，但容易因遗漏字段导致意外行为——它会把未显式声明的 grid-template-areas、grid-auto-flow 等重置为初始值。
- 例如原布局依赖
grid-auto-flow: dense，但@media print里只写grid: 1fr / 1fr;，dense 就丢了，可能造成空白空洞 - 安全做法是：在 print 中用完整简写，比如
grid: "header" "main" "sidebar" "footer" / 1fr;（此时自动推导grid-template-areas和grid-template-columns） - Firefox 对
grid简写中混合字符串和尺寸的支持略弱于 Chrome，遇到错位优先切回grid-template-areas+grid-template-rows分写
内容顺序与可访问性不能靠视觉翻转补救
行列翻转只是视觉层调整，DOM 顺序没变。如果打印后内容逻辑顺序错乱（比如表单字段和标签在源码中相邻，但打印时被 grid 拆到不同区域），屏幕阅读器和搜索引擎仍按原始 DOM 解析。
- 先检查是否真需要翻转——很多所谓“打印适配”其实只需调小
gap、隐藏非必要元素、用break-inside: avoid防断行 - 若必须翻转，且涉及表单或数据表格，请同步调整 HTML 结构或用
order辅助（但order不影响打印流式布局，慎用） - 打印预览里按 Ctrl+P 后点“更多设置”→“背景图形”，务必勾上，否则
background-color和部分 grid gap 颜色可能不显示
grid-column/grid-row 仍按旧轨道索引，它们会集体偏移甚至溢出。动手前先清掉所有显式行列定位，只靠 grid-area 或 grid-auto-flow 驱动。 
