grid-area-template内に改ページを挿入したい

前提・実現したいこと

以下のようにgrid内に改ページを入れたいのですが、何か方法はあるでしょうか。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>CSS Grid</title>
6  <link rel="stylesheet" href="css/styles.css">
7</head>
8<body>
9  <div class="container">
10    <div class="box1">1</div>
11    <div class="box2">2</div>
12    <div class="box3  printarea">3</div>
13    <div class="box4">4</div>
14    <div class="box5">5</div>
15  </div>
16</body>
17</html>

CSS
1.printarea {
2  page-break-after: always;
3}
4
5.container {
6  height: 600px;
7  width: 400px;
8  display: grid;
9  grid-template-columns: 50% 50%;
10  grid-template-rows: auto;
11  grid-template-areas:
12      "b1 b2"
13      "b3 b4"
14      "b5 .";
15}
16
17.box1 {
18  background: hsl(0, 60%, 60%);
19  grid-area: b1;
20}
21
22.box2 {
23  background: hsl(60, 60%, 60%);
24  grid-area: b2;
25}
26
27.box3 {
28  background: hsl(120, 60%, 60%);
29  grid-area: b3;
30}
31
32.box4 {
33  background: hsl(180, 60%, 60%);
34  grid-area: b4;
35}
36
37.box5 {
38  background: hsl(240, 60%, 60%);
39  grid-area: b5;
40}
41
42