本文介绍如何在纯 html/css 中构建适合 pdf 打印的多列布局，重点解决浏览器打印预览或转 pdf 时列样式失效的问题，通过 css grid 实现稳定、响应式且可跨页延续的列结构。
本文介绍如何在纯 html/css 中构建适合 pdf 打印的多列布局，重点解决浏览器打印预览或转 pdf 时列样式失效的问题，通过 css grid 实现稳定、响应式且可跨页延续的列结构。
在将 HTML 导出为 PDF（如通过 Chrome 浏览器「打印 → 另存为 PDF」）时，许多开发者发现 column-count 或 Flexbox 布局在分页时表现异常：列可能被截断、错位，甚至完全坍缩为单列。根本原因在于：原生多列（CSS Multi-column Layout）不支持跨页内容流的精确控制，且多数 PDF 渲染引擎对 break-inside: avoid 等分页属性支持有限。
相比之下，CSS Grid 是更可靠的选择——它将布局逻辑固化为显式网格容器，每个 .column 作为独立块级元素参与文档流，天然兼容分页渲染。以下是一个生产就绪的三列打印布局示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>PDF 友好多列文档</title>
<style>
/* 重置与打印适配 */
* { margin: 0; padding: 0; box-sizing: border-box; }
@media print {
body { font-size: 12pt; line-height: 1.4; color: #333; }
@page { size: A4; margin: 15mm; }
.row { break-inside: avoid; } /* 防止整行被分页截断 */
.column { page-break-inside: avoid; } /* 关键：禁止列内断页 */
}
/* 核心 Grid 布局（支持任意列数） */
.row {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 等宽三列；改为 repeat(4, 1fr) 即四列 */
gap: 12px; /* 列间间距，替代冗余边框 */
margin-bottom: 16px;
}
.column {
background-color: #f9f9f9;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
min-height: 60px; /* 避免极短内容导致高度塌陷 */
}
/* 响应式回退（小屏设备显示为单列） */
@media screen and (max-width: 768px) {
.row { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="row">
<div class="column"><h3>第一列</h3><p>此处放置详细内容，支持段落、列表、图片等。Grid 布局确保其始终占据固定列区域。</p></div>
<div class="column"><h3>第二列</h3><p>内容长度可不同，Grid 自动按内容撑高，无需 JavaScript 计算高度。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1159" title="Musho"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680127091510.png" alt="Musho" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1159" title="Musho">Musho</a>
<p>AI网页设计Figma插件</p>
</div>
<a href="/ai/1159" title="Musho" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><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"><h3>第三列</h3><p>即使该列内容较少，也不会影响其他列的对齐与宽度分配。</p></div>
</div>
<div class="row">
<div class="column"><h3>数据区块 A</h3><ul><li>条目 1</li><li>条目 2</li></ul></div>
<div class="column"><h3>数据区块 B</h3><p>支持嵌套表格或代码块：</p><pre class="brush:php;toolbar:false;"><code>const x = 1;</code>
数据区块 C
长文本测试：Lorem ipsum dolor sit amet...（可自动换行）
