<article>
    <section>
      <p>Section 1</p>
    </section>
    <section>
      <p>Section 2</p>
    </section>
    <section>
      <p>Section 3</p>
    </section>
    <section>
      <p>Section 4</p>
    </section>
    <section>
      <p>Section 5</p>
    </section>
  </article>
  
  <div>
    <button>Print Webpage</button>
  </div>

@page :right {
  margin: 20%;
}

body {
  background-color: #333;
  display: grid;
}

section {
  background-color: #c2d1e5;
  border-radius: 10px;
  display: grid;
  margin-block-end: 1.5rem;
  padding: 1rem;
  place-items: center;
  width: 30%;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
section {
  page-break-after: always;
  break-after: page;
}

document.querySelector("button").addEventListener('click', () => {
  window.print();
});