Css 如何通过重复的网格区域来简化网格布局

我有这种网格 struct ，并努力简化它，因为我需要无限的div.我try 了不同的方法，使用第n个子元素和网格跨度，但我就是做不到.

超文本标记语言

<div class="parent">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
    <div class="div5">5</div>
    <div class="div6">6</div>
    <div class="div7">7</div>
    <div class="div8">8</div>
    <div class="div9">9</div>
    <div class="div10">10</div>
    <div class="div11">11</div>
    <div class="div12">12</div>
</div>

CSS

.parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(9, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background:#FFF;
}

.parent div {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:50px;
    border: 1px solid red;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 3 / 3; }
.div3 { grid-area: 3 / 2 / 4 / 3; }
.div4 { grid-area: 2 / 1 / 4 / 2; }
.div5 { grid-area: 4 / 1 / 5 / 2; }
.div6 { grid-area: 4 / 2 / 6 / 3; }
.div7 { grid-area: 6 / 2 / 7 / 3; }
.div8 { grid-area: 5 / 1 / 7 / 2; }
.div9 { grid-area: 7 / 1 / 8 / 2; }
.div10 { grid-area: 7 / 2 / 9 / 3; }
.div11 { grid-area: 9 / 2 / 10 / 3; }
.div12 { grid-area: 8 / 1 / 10 / 2; }