本文详解如何通过纯 css grid 实现 html 页面在打印为 pdf 时稳定、响应式的多列布局，无需额外库，兼容主流浏览器及 pdf 打印引擎（如 chrome devtools、wkhtmltopdf）。
本文详解如何通过纯 css grid 实现 html 页面在打印为 pdf 时稳定、响应式的多列布局，无需额外库，兼容主流浏览器及 pdf 打印引擎（如 chrome devtools、wkhtmltopdf）。
在将 HTML 导出为 PDF 的场景中（例如使用浏览器“打印→另存为 PDF”、Puppeteer 或 wkhtmltopdf 工具），开发者常遇到 CSS 布局失效问题——尤其是 column-count 或 Flexbox 在部分打印上下文中渲染异常。CSS Grid 是目前最可靠、语义清晰且打印友好的多列解决方案，因其基于显式轨道定义，不依赖流式重排，在 PDF 生成阶段能被准确解析。
以下是一个生产就绪的三列布局示例，已通过 Chrome、Edge 和 wkhtmltopdf 12.x 实测验证：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>PDF 友好型多列 HTML</title>
<style>
/* 关键：启用 Grid 布局 */
.row {
display: grid;
/* 推荐使用 repeat() 提升可维护性 */
grid-template-columns: repeat(3, 1fr);
gap: 12px; /* 列间间距，比 margin 更可控 */
margin-bottom: 16px;
}
.column {
background-color: #f9f9f9;
padding: 12px 16px;
border: 1px solid #ddd;
font-size: 14px;
line-height: 1.5;
}
/* 打印适配增强（可选但强烈推荐） */
@media print {
body {
margin: 0;
font-size: 12pt; /* 统一打印字体大小 */
}
.row {
break-inside: avoid; /* 防止行被跨页截断 */
}
.column {
break-inside: avoid; /* 确保单列内容不跨页断裂 */
}
}
</style>
</head>
<body>
<div class="row">
<div class="column"><p><strong>第一列</strong><br>客户信息、联系人、地址等结构化数据</p></div>
<div class="column"><p><strong>第二列</strong><br>订单编号、日期、状态标签</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></div>
<div class="column"><p><strong>第三列</strong><br>金额汇总、税率、应付总额</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1573" title="NexChatGPT"><img
src="https://img.php.cn/upload/ai_manual/000/969/633/68b79f3496bf8716.png" alt="NexChatGPT" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1573" title="NexChatGPT">NexChatGPT</a>
<p>火爆全网的IDEA插件，支持IDEA全家桶</p>
</div>
<a href="/ai/1573" title="NexChatGPT" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></div>
</div>
<div class="row">
<div class="column"><p><strong>项目明细</strong><br>商品 A × 2<br>单价 ¥120.00</p></div>
<div class="column"><p><strong>项目明细</strong><br>商品 B × 1<br>单价 ¥85.50</p></div>
<div class="column"><p><strong>项目明细</strong><br>运费<br>¥15.00</p></div>
</div>
</body>
</html>✅ 关键实践建议：
- 避免 float 和 inline-block：它们在打印中易导致列宽塌陷或换行错乱；
- 慎用 column-count：虽语义直观，但在 PDF 渲染中常出现内容重叠或列高不一致；
- 始终添加 @media print 规则：控制页边距、字体、分页行为（如 break-inside: avoid）；
- 测试真实导出流程：在 Chrome 中按 Ctrl+P → “另存为 PDF”，而非仅依赖屏幕预览；
- 动态列数扩展：只需修改 repeat(N, 1fr) 中的 N，例如 repeat(4, 25%) 或 repeat(auto-fit, minmax(200px, 1fr)))（后者需确保容器有明确宽度）。
总结：纯 CSS Grid 是 HTML → PDF 多列布局的黄金标准——零依赖、高兼容、易维护。只要规避浮动与复杂媒体查询，即可生成专业、稳定的打印文档。
