HTML/CSS：网格行之间的分页符
HTML/CSS: Page break between grid rows
我使用 HTML 创建了一个用于打印的文档（PDF 格式）。文档的总体布局特点：带标题的 header、带注释的边栏和分隔成多个部分的正文。一个最小的再生例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MRE</title>
<style>
body {
display: grid;
grid-template: "head head" max-content
"main side"
/ auto 20%;
}
header {
grid-area: head;
break-after: avoid;
}
main {
grid-area: main;
}
aside {
grid-area: side;
}
section {
padding: .5rem 0;
break-after: auto;
}
</style>
</head>
<body>
<header><h1>Lorem Ipsum</h1></header>
<main>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum elementum metus, in accumsan lacus tristique eu. Aenean quam justo, gravida ac lectus sit amet, mattis sodales ipsum. Etiam commodo libero nulla, nec hendrerit justo maximus eget. Proin imperdiet venenatis arcu nec iaculis. Ut porttitor placerat odio, tincidunt ullamcorper ante auctor id. Aenean urna est, ornare non tellus id, sagittis ultrices est. Duis diam enim, aliquam eget mauris at, porttitor dictum urna. Donec tempor accumsan nibh, id aliquam velit blandit vel. Integer sit amet nibh et lectus euismod iaculis.
</section>
<section>
Nunc rhoncus at dolor quis dignissim. Praesent eu nisi finibus tellus commodo tincidunt. Morbi at massa eget diam blandit varius. Proin ac ullamcorper erat. Suspendisse eget nibh nec mauris pharetra aliquet sit amet eu lectus. Aliquam enim nisi, facilisis non turpis et, ultrices ultrices sapien. Vivamus maximus magna sit amet urna laoreet, quis pellentesque nibh aliquam. Quisque maximus nulla at fringilla convallis. Sed euismod congue pellentesque. Donec sit amet gravida tortor, ut blandit risus. Mauris vel aliquet odio, sit amet porta dolor. Nulla semper fermentum quam non egestas. Donec justo tortor, cursus non urna nec, porta consectetur felis. Nullam cursus commodo leo ut sodales. Pellentesque lacinia turpis sed justo placerat convallis.
</section>
<section>
Donec pulvinar tortor a libero dignissim, vel maximus enim condimentum. Quisque sollicitudin risus velit, non porta enim molestie id. Suspendisse sed erat sapien. Nam nunc ligula, hendrerit a blandit et, lobortis at massa. Donec id purus ut magna feugiat luctus tincidunt id augue. Aliquam eu nibh id ligula rutrum interdum eu eget purus. Fusce non metus ac mi facilisis rhoncus quis eget leo.
</section>
<section>
Fusce aliquet blandit enim vitae porttitor. Nunc ante justo, mattis sagittis condimentum vitae, elementum sit amet urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam tellus orci, efficitur quis interdum et, viverra sit amet magna. Praesent congue lacus malesuada, viverra sapien sit amet, cursus leo. Aliquam posuere tellus sapien, eu facilisis erat ullamcorper a. Maecenas ligula eros, maximus vitae blandit sed, viverra at purus. Phasellus diam ipsum, convallis nec pretium malesuada, dictum non lorem. Duis cursus consequat justo sit amet vehicula. Ut metus leo, pharetra eget metus accumsan, mattis ullamcorper mi. Nulla sem ex, sagittis a orci vitae, lacinia fermentum nibh. Aliquam egestas dui sit amet vehicula consequat.
</section>
<section>
Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis.
</section>
<section>
Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis.
</section>
<section>
Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis.
</section>
</main>
<aside>Here are some side-notes</aside>
</body>
</html>
当我打印这份文档时，第一页只有header部分，而main内容从第二页开始。文本在 section 中间断开（最后一行甚至被水平切成两半）。 aside 部分应该位于文本旁边。
我想在各部分之间插入分页符，第一页应包含 header 以及前几个部分。
显然，CSS 属性 break-after 在这种情况下没有效果。 暗示 CSS 网格和打印不能很好地协同工作。不然怎么可能实现上面的布局呢？
一个可能的解决方案是改用 flexbox 布局。但是，有没有可能使用网格布局？
防止 <section>
内的（分页）中断
section {
break-inside: avoid;
}
在您的代码中，我将 break-after: auto; 更改为 break-inside: avoid;，将所有部分的长度加倍，然后打印成 PDF。这是它的屏幕截图。
不要对 screen 和 print 媒体一视同仁。在屏幕上你可以有菜单栏，浮动 headers，动画的东西。你不能在打印页面上显示这些东西。 @media rule 允许我们为不同的媒体指定不同的样式。
How else would it be possible to achieve the above layout?
如果网格布局在打印时出现问题，那么我们可以使用不同的 CSS 进行打印，在 @media print {} 规则内：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>@media print demo</title>
<style>
/* normal style rules */
body {
display: grid;
grid-template: 'head head' max-content 'main side' / auto 20%;
}
header {
grid-area: head;
break-after: avoid;
}
main {
grid-area: main;
}
aside {
grid-area: side;
}
section {
padding: 0.5rem 0;
break-after: auto;
}
/* override the rules for printing */
@media print {
@page {
margin: 2cm;
}
body {
/* no grid layout */
font-size: 6mm;
font-family: 'Times New Roman', Times, serif;
}
header {
break-after: avoid;
}
main {
width: 148mm;
float: left;
}
aside {
float: right;
font-size: 5mm;
font-style: italic;
margin-left: 5mm;
}
}
</style>
</head>
<body>
<header>
<h1>Lorem Ipsum</h1>
</header>
<main>
<section>
1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum elementum metus, in accumsan lacus tristique eu. Aenean quam justo, gravida ac lectus sit amet, mattis sodales ipsum. Etiam commodo libero nulla, nec hendrerit justo maximus eget.
Proin imperdiet venenatis arcu nec iaculis. Ut porttitor placerat odio, tincidunt ullamcorper ante auctor id. Aenean urna est, ornare non tellus id, sagittis ultrices est. Duis diam enim, aliquam eget mauris at, porttitor dictum urna. Donec tempor
accumsan nibh, id aliquam velit blandit vel. Integer sit amet nibh et lectus euismod iaculis.
</section>
<section>
2 Nunc rhoncus at dolor quis dignissim. Praesent eu nisi finibus tellus commodo tincidunt. Morbi at massa eget diam blandit varius. Proin ac ullamcorper erat. Suspendisse eget nibh nec mauris pharetra aliquet sit amet eu lectus. Aliquam enim nisi, facilisis
non turpis et, ultrices ultrices sapien. Vivamus maximus magna sit amet urna laoreet, quis pellentesque nibh aliquam. Quisque maximus nulla at fringilla convallis. Sed euismod congue pellentesque. Donec sit amet gravida tortor, ut blandit risus.
Mauris vel aliquet odio, sit amet porta dolor. Nulla semper fermentum quam non egestas. Donec justo tortor, cursus non urna nec, porta consectetur felis. Nullam cursus commodo leo ut sodales. Pellentesque lacinia turpis sed justo placerat convallis.
</section>
<section>
3 Donec pulvinar tortor a libero dignissim, vel maximus enim condimentum. Quisque sollicitudin risus velit, non porta enim molestie id. Suspendisse sed erat sapien. Nam nunc ligula, hendrerit a blandit et, lobortis at massa. Donec id purus ut magna feugiat
luctus tincidunt id augue. Aliquam eu nibh id ligula rutrum interdum eu eget purus. Fusce non metus ac mi facilisis rhoncus quis eget leo. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, voluptatibus!
</section>
<section>
4 Fusce aliquet blandit enim vitae porttitor. Nunc ante justo, mattis sagittis condimentum vitae, elementum sit amet urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam tellus orci, efficitur quis
interdum et, viverra sit amet magna. Praesent congue lacus malesuada, viverra sapien sit amet, cursus leo. Aliquam posuere tellus sapien, eu facilisis erat ullamcorper a. Maecenas ligula eros, maximus vitae blandit sed, viverra at purus. Phasellus
diam ipsum, convallis nec pretium malesuada, dictum non lorem. Duis cursus consequat justo sit amet vehicula. Ut metus leo, pharetra eget metus accumsan, mattis ullamcorper mi. Nulla sem ex, sagittis a orci vitae, lacinia fermentum nibh. Aliquam
egestas dui sit amet vehicula consequat. Abcd asome abckd efg.
</section>
<section>
5 Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus
ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales
pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis.
</section>
<section>
6 Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus
ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales
pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem voluptatibus voluptates repellat enim? Similique
tenetur minus ad. Totam molestias numquam esse harum, molestiae aspernatur. Asperiores, aliquam odit esse illum praesentium eos. Nobis ullam a doloremque quaerat molestiae veritatis eaque quidem. Odio quae corrupti, praesentium, sed quibusdam incidunt
ipsum harum asperiores in magni fugit nulla. Culpa eligendi natus distinctio dignissimos, facilis consequuntur, possimus repellat tenetur ipsam dolores sint. Ratione, ducimus itaque. Itaque doloribus dolores quasi quae repellendus voluptate inventore
aliquam beatae harum, sed, sit perspiciatis? Eveniet nostrum ipsam sunt modi ex quas nisi praesentium ad exercitationem, excepturi molestiae. Magni quaerat vel pariatur sint quo necessitatibus consequatur repellendus. Consectetur hic veniam natus,
deleniti distinctio tempora ipsam incidunt cum autem aspernatur tempore. A neque quaerat placeat cum consequuntur doloribus, officia quo explicabo nisi molestias, iure ipsam repellat pariatur commodi maiores ex magni in natus perferendis minima
corporis molestiae odit voluptatum fugiat? Quaerat explicabo nulla labore, odio eos iusto optio omnis quis, quidem expedita reprehenderit rerum itaque saepe natus nemo dolore! Adipisci sint sunt laudantium temporibus in illum explicabo sed dolorem,
similique possimus cumque cum eveniet et unde ducimus eaque nemo reprehenderit nisi? Omnis impedit ducimus totam nostrum quos praesentium ipsa earum facilis deleniti.
</section>
<section>
7 Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus
ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales
pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis.
</section>
</main>
<aside>Here are some important side-notes. Which are very useful.</aside>
</body>
</html>
将代码复制到单独的 HTML 文件中，然后 运行 在浏览器中将其复制。
这是它在 Chrome 上的样子：（在新标签页中打开图片）
在这里，我避免使用网格布局进行打印。并使用不同的规则取得了相似的结果。用于打印的尺寸考虑 A4 尺寸页面。
在 @media print 规则中，您可以使用不同的打印布局。选择不打印某些内容等
几点提示：
我使用 HTML 创建了一个用于打印的文档（PDF 格式）。文档的总体布局特点：带标题的 header、带注释的边栏和分隔成多个部分的正文。一个最小的再生例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MRE</title>
<style>
body {
display: grid;
grid-template: "head head" max-content
"main side"
/ auto 20%;
}
header {
grid-area: head;
break-after: avoid;
}
main {
grid-area: main;
}
aside {
grid-area: side;
}
section {
padding: .5rem 0;
break-after: auto;
}
</style>
</head>
<body>
<header><h1>Lorem Ipsum</h1></header>
<main>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum elementum metus, in accumsan lacus tristique eu. Aenean quam justo, gravida ac lectus sit amet, mattis sodales ipsum. Etiam commodo libero nulla, nec hendrerit justo maximus eget. Proin imperdiet venenatis arcu nec iaculis. Ut porttitor placerat odio, tincidunt ullamcorper ante auctor id. Aenean urna est, ornare non tellus id, sagittis ultrices est. Duis diam enim, aliquam eget mauris at, porttitor dictum urna. Donec tempor accumsan nibh, id aliquam velit blandit vel. Integer sit amet nibh et lectus euismod iaculis.
</section>
<section>
Nunc rhoncus at dolor quis dignissim. Praesent eu nisi finibus tellus commodo tincidunt. Morbi at massa eget diam blandit varius. Proin ac ullamcorper erat. Suspendisse eget nibh nec mauris pharetra aliquet sit amet eu lectus. Aliquam enim nisi, facilisis non turpis et, ultrices ultrices sapien. Vivamus maximus magna sit amet urna laoreet, quis pellentesque nibh aliquam. Quisque maximus nulla at fringilla convallis. Sed euismod congue pellentesque. Donec sit amet gravida tortor, ut blandit risus. Mauris vel aliquet odio, sit amet porta dolor. Nulla semper fermentum quam non egestas. Donec justo tortor, cursus non urna nec, porta consectetur felis. Nullam cursus commodo leo ut sodales. Pellentesque lacinia turpis sed justo placerat convallis.
</section>
<section>
Donec pulvinar tortor a libero dignissim, vel maximus enim condimentum. Quisque sollicitudin risus velit, non porta enim molestie id. Suspendisse sed erat sapien. Nam nunc ligula, hendrerit a blandit et, lobortis at massa. Donec id purus ut magna feugiat luctus tincidunt id augue. Aliquam eu nibh id ligula rutrum interdum eu eget purus. Fusce non metus ac mi facilisis rhoncus quis eget leo.
</section>
<section>
Fusce aliquet blandit enim vitae porttitor. Nunc ante justo, mattis sagittis condimentum vitae, elementum sit amet urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam tellus orci, efficitur quis interdum et, viverra sit amet magna. Praesent congue lacus malesuada, viverra sapien sit amet, cursus leo. Aliquam posuere tellus sapien, eu facilisis erat ullamcorper a. Maecenas ligula eros, maximus vitae blandit sed, viverra at purus. Phasellus diam ipsum, convallis nec pretium malesuada, dictum non lorem. Duis cursus consequat justo sit amet vehicula. Ut metus leo, pharetra eget metus accumsan, mattis ullamcorper mi. Nulla sem ex, sagittis a orci vitae, lacinia fermentum nibh. Aliquam egestas dui sit amet vehicula consequat.
</section>
<section>
Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis.
</section>
<section>
Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis.
</section>
<section>
Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis.
</section>
</main>
<aside>Here are some side-notes</aside>
</body>
</html>
当我打印这份文档时，第一页只有header部分，而main内容从第二页开始。文本在 section 中间断开（最后一行甚至被水平切成两半）。 aside 部分应该位于文本旁边。
我想在各部分之间插入分页符，第一页应包含 header 以及前几个部分。
显然，CSS 属性 break-after 在这种情况下没有效果。
一个可能的解决方案是改用 flexbox 布局。但是，有没有可能使用网格布局？
防止 <section>
section {
break-inside: avoid;
}
在您的代码中，我将 break-after: auto; 更改为 break-inside: avoid;，将所有部分的长度加倍，然后打印成 PDF。这是它的屏幕截图。
不要对 screen 和 print 媒体一视同仁。在屏幕上你可以有菜单栏，浮动 headers，动画的东西。你不能在打印页面上显示这些东西。 @media rule 允许我们为不同的媒体指定不同的样式。
How else would it be possible to achieve the above layout?
如果网格布局在打印时出现问题，那么我们可以使用不同的 CSS 进行打印，在 @media print {} 规则内：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>@media print demo</title>
<style>
/* normal style rules */
body {
display: grid;
grid-template: 'head head' max-content 'main side' / auto 20%;
}
header {
grid-area: head;
break-after: avoid;
}
main {
grid-area: main;
}
aside {
grid-area: side;
}
section {
padding: 0.5rem 0;
break-after: auto;
}
/* override the rules for printing */
@media print {
@page {
margin: 2cm;
}
body {
/* no grid layout */
font-size: 6mm;
font-family: 'Times New Roman', Times, serif;
}
header {
break-after: avoid;
}
main {
width: 148mm;
float: left;
}
aside {
float: right;
font-size: 5mm;
font-style: italic;
margin-left: 5mm;
}
}
</style>
</head>
<body>
<header>
<h1>Lorem Ipsum</h1>
</header>
<main>
<section>
1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum elementum metus, in accumsan lacus tristique eu. Aenean quam justo, gravida ac lectus sit amet, mattis sodales ipsum. Etiam commodo libero nulla, nec hendrerit justo maximus eget.
Proin imperdiet venenatis arcu nec iaculis. Ut porttitor placerat odio, tincidunt ullamcorper ante auctor id. Aenean urna est, ornare non tellus id, sagittis ultrices est. Duis diam enim, aliquam eget mauris at, porttitor dictum urna. Donec tempor
accumsan nibh, id aliquam velit blandit vel. Integer sit amet nibh et lectus euismod iaculis.
</section>
<section>
2 Nunc rhoncus at dolor quis dignissim. Praesent eu nisi finibus tellus commodo tincidunt. Morbi at massa eget diam blandit varius. Proin ac ullamcorper erat. Suspendisse eget nibh nec mauris pharetra aliquet sit amet eu lectus. Aliquam enim nisi, facilisis
non turpis et, ultrices ultrices sapien. Vivamus maximus magna sit amet urna laoreet, quis pellentesque nibh aliquam. Quisque maximus nulla at fringilla convallis. Sed euismod congue pellentesque. Donec sit amet gravida tortor, ut blandit risus.
Mauris vel aliquet odio, sit amet porta dolor. Nulla semper fermentum quam non egestas. Donec justo tortor, cursus non urna nec, porta consectetur felis. Nullam cursus commodo leo ut sodales. Pellentesque lacinia turpis sed justo placerat convallis.
</section>
<section>
3 Donec pulvinar tortor a libero dignissim, vel maximus enim condimentum. Quisque sollicitudin risus velit, non porta enim molestie id. Suspendisse sed erat sapien. Nam nunc ligula, hendrerit a blandit et, lobortis at massa. Donec id purus ut magna feugiat
luctus tincidunt id augue. Aliquam eu nibh id ligula rutrum interdum eu eget purus. Fusce non metus ac mi facilisis rhoncus quis eget leo. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, voluptatibus!
</section>
<section>
4 Fusce aliquet blandit enim vitae porttitor. Nunc ante justo, mattis sagittis condimentum vitae, elementum sit amet urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam tellus orci, efficitur quis
interdum et, viverra sit amet magna. Praesent congue lacus malesuada, viverra sapien sit amet, cursus leo. Aliquam posuere tellus sapien, eu facilisis erat ullamcorper a. Maecenas ligula eros, maximus vitae blandit sed, viverra at purus. Phasellus
diam ipsum, convallis nec pretium malesuada, dictum non lorem. Duis cursus consequat justo sit amet vehicula. Ut metus leo, pharetra eget metus accumsan, mattis ullamcorper mi. Nulla sem ex, sagittis a orci vitae, lacinia fermentum nibh. Aliquam
egestas dui sit amet vehicula consequat. Abcd asome abckd efg.
</section>
<section>
5 Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus
ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales
pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis.
</section>
<section>
6 Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus
ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales
pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem voluptatibus voluptates repellat enim? Similique
tenetur minus ad. Totam molestias numquam esse harum, molestiae aspernatur. Asperiores, aliquam odit esse illum praesentium eos. Nobis ullam a doloremque quaerat molestiae veritatis eaque quidem. Odio quae corrupti, praesentium, sed quibusdam incidunt
ipsum harum asperiores in magni fugit nulla. Culpa eligendi natus distinctio dignissimos, facilis consequuntur, possimus repellat tenetur ipsam dolores sint. Ratione, ducimus itaque. Itaque doloribus dolores quasi quae repellendus voluptate inventore
aliquam beatae harum, sed, sit perspiciatis? Eveniet nostrum ipsam sunt modi ex quas nisi praesentium ad exercitationem, excepturi molestiae. Magni quaerat vel pariatur sint quo necessitatibus consequatur repellendus. Consectetur hic veniam natus,
deleniti distinctio tempora ipsam incidunt cum autem aspernatur tempore. A neque quaerat placeat cum consequuntur doloribus, officia quo explicabo nisi molestias, iure ipsam repellat pariatur commodi maiores ex magni in natus perferendis minima
corporis molestiae odit voluptatum fugiat? Quaerat explicabo nulla labore, odio eos iusto optio omnis quis, quidem expedita reprehenderit rerum itaque saepe natus nemo dolore! Adipisci sint sunt laudantium temporibus in illum explicabo sed dolorem,
similique possimus cumque cum eveniet et unde ducimus eaque nemo reprehenderit nisi? Omnis impedit ducimus totam nostrum quos praesentium ipsa earum facilis deleniti.
</section>
<section>
7 Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus
ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales
pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis.
</section>
</main>
<aside>Here are some important side-notes. Which are very useful.</aside>
</body>
</html>
将代码复制到单独的 HTML 文件中，然后 运行 在浏览器中将其复制。
这是它在 Chrome 上的样子：（在新标签页中打开图片）
在这里，我避免使用网格布局进行打印。并使用不同的规则取得了相似的结果。用于打印的尺寸考虑 A4 尺寸页面。
在 @media print 规则中，您可以使用不同的打印布局。选择不打印某些内容等
几点提示：