This example shows how to split the <section>
s into individual pages in landscape
format with each page having a 20% margin when printed.
HTML
<button>Print Webpage</button>
<article>
<section>
<h2>Header</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
velit.
</p>
</section>
<section>
<h2>Header</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
velit.
</p>
</section>
<section>
<h2>Header</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
velit.
</p>
</section>
<section>
<h2>Header</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
velit.
</p>
</section>
<section>
<h2>Header</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
velit.
</p>
</section>
</article>
CSS
@page {
size: landscape;
margin: 20%;
}
body {
font-family: "Helvetica";
background-color: rgb(110 110 119);
}
article {
width: 100%;
}
section {
display: grid;
background-color: white;
border-radius: 0.6rem;
margin-block-end: 1.5rem;
justify-items: center;
padding: 1rem;
width: 50%;
page-break-after: always;
break-after: page;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
section {
page-break-after: always;
break-after: page;
}
@media print {
button {
display: none;
}
}
JavaScript
const button = document.querySelector("button");
button.addEventListener("click", () => {
window.print();
});
Result
Clicking the print button will launch a print dialog with the html sections split into individual pages.