我有一个网站上的WordPress和一个部分，用户添加任何数量的照片。该部分是用网格。现在的问题是，默认情况下有10张照片在该部分。但当用户添加更多，网格打破。我如何使网格重复？

.grid {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 30px;
  grid-template-areas: "one two three four five" "six six seven seven eight" "nine ten seven seven eight";
}

.grid .grid-item:nth-child(1) {
  grid-area: one;
}

.grid .grid-item:nth-child(2) {
  grid-area: two;
}

.grid .grid-item:nth-child(3) {
  grid-area: three;
}

.grid .grid-item:nth-child(4) {
  grid-area: four;
}

.grid .grid-item:nth-child(5) {
  grid-area: five;
}

.grid .grid-item:nth-child(6) {
  grid-area: six;
}

.grid .grid-item:nth-child(7) {
  grid-area: seven;
}

.grid .grid-item:nth-child(8) {
  grid-area: eight;
}

.grid .grid-item:nth-child(9) {
  grid-area: nine;
}

.grid .grid-item:nth-child(10) {
  grid-area: ten;
}

<div class="grid">
  <div class="grid-item">GridItem1</div>
  <div class="grid-item">GridItem2</div>
  <div class="grid-item">GridItem3</div>
  <div class="grid-item">GridItem4</div>
  <div class="grid-item">GridItem5</div>
  <div class="grid-item">GridItem6</div>
  <div class="grid-item">GridItem7</div>
  <div class="grid-item">GridItem8</div>
  <div class="grid-item">GridItem9</div>
  <div class="grid-item">GridItem10</div>
</div>