How to start grid column again after specific number of items in css?

Question

Start 10th item again from first line with css display grid.

Something like

1 2 3   10 11 12

1 5 6   13 14 15

7 8 9   16

Please suggest solution about css only not in html.

I want to make it response like user will see 1fr 1fr 1fr 1fr in desktop.

And on mobile I want add horizontal scrolling. show 1fr 1fr 1fr

.grid-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.grid-item .circle {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #aaa;
}

<div class="grid-list">
    <div class="grid-item">
        <div class="circle">1</div>
    </div>
    <div class="grid-item">
        <div class="circle">2</div>
    </div>
    <div class="grid-item">
        <div class="circle">3</div>
    </div>
    <div class="grid-item">
        <div class="circle">4</div>
    </div>
    <div class="grid-item">
        <div class="circle">5</div>
    </div>
    <div class="grid-item">
        <div class="circle">6</div>
    </div>
    <div class="grid-item">
        <div class="circle">7</div>
    </div>
    <div class="grid-item">
        <div class="circle">8</div>
    </div>
    <div class="grid-item">
        <div class="circle">9</div>
    </div>
    <div class="grid-item">
        <div class="circle">10</div>
    </div>
    <div class="grid-item">
        <div class="circle">11</div>
    </div>
    <div class="grid-item">
        <div class="circle">12</div>
    </div>
    <div class="grid-item">
        <div class="circle">13</div>
    </div>
    <div class="grid-item">
        <div class="circle">14</div>
    </div>
    <div class="grid-item">
        <div class="circle">15</div>
    </div>
    <div class="grid-item">
        <div class="circle">16</div>
    </div>
</div>

Answer 1

You can do like below:

.grid-list {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow:dense;
  gap: 5px;
}
.grid-item:nth-child(3n + 1) {grid-column:1}
.grid-item:nth-child(3n + 2) {grid-column:2}
.grid-item:nth-child(3n + 3) {grid-column:3}
@media (min-width:800px) {
.grid-item:nth-child(3n + 10){grid-column:4}
.grid-item:nth-child(3n + 11){grid-column:5}
.grid-item:nth-child(3n + 12){grid-column:6}
}

.grid-item  {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #aaa;
}

<div class="grid-list">
  <div class="grid-item">
    <div class="circle">1</div>
  </div>
  <div class="grid-item">
    <div class="circle">2</div>
  </div>
  <div class="grid-item">
    <div class="circle">3</div>
  </div>
  <div class="grid-item">
    <div class="circle">4</div>
  </div>
  <div class="grid-item">
    <div class="circle">5</div>
  </div>
  <div class="grid-item">
    <div class="circle">6</div>
  </div>
  <div class="grid-item">
    <div class="circle">7</div>
  </div>
  <div class="grid-item">
    <div class="circle">8</div>
  </div>
  <div class="grid-item">
    <div class="circle">9</div>
  </div>
  <div class="grid-item">
    <div class="circle">10</div>
  </div>
  <div class="grid-item">
    <div class="circle">11</div>
  </div>
  <div class="grid-item">
    <div class="circle">12</div>
  </div>
  <div class="grid-item">
    <div class="circle">13</div>
  </div>
  <div class="grid-item">
    <div class="circle">14</div>
  </div>
  <div class="grid-item">
    <div class="circle">15</div>
  </div>
  <div class="grid-item">
    <div class="circle">16</div>
  </div>
</div>