Please help me to this (attached JPG files, what I want it) layout using flexbox with responsive, I have JS code to generate below code:

<div class="grid-container" id="gridContainer">
  <div class="loginBox">Login Box comes here</div>

  <!-- Grid items will be generated by JavaScript -->
  <div class="grid-item" style="background-image: url("thumbs/1.jpg"); border: none;"></div>
  <div class="grid-item" style="background-image: url("thumbs/2.jpg"); border: none;"></div>
  <div class="grid-item" style="background-image: url("thumbs/3.jpg"); border: none;"></div>
  <div class="grid-item" style="background-image: url("thumbs/4.jpg"); border: none;"></div>
  <div class="grid-item" style="background-image: url("thumbs/5.jpg"); border: none;"></div>
  <div class="grid-item" style="background-image: url("thumbs/6.png"); border: none;"></div>
  <div class="grid-item" style="background-image: url("thumbs/7.jpg"); border: none;"></div>
  <div class="grid-item" style="background-image: url("thumbs/8.png"); border: none;"></div>
  <div class="grid-item" style="background-image: url("thumbs/9.png"); border: none;"></div>
  <div class="grid-item" style="background-image: url("thumbs/10.jpg"); border: none;"></div>
  <div class="grid-item" style="background-image: url("thumbs/11.jpg"); border: none;"></div>
  <div class="grid-item" style="background-image: url("thumbs/12.jpg"); border: none;"></div>
  <div class="grid-item" style="background-image: url("thumbs/13.png"); border: none;"></div>
  <div class="grid-item" style="background-image: url("thumbs/14.jpg"); border: none;"></div>
  <div class="grid-item" style="background-image: url("thumbs/15.jpg"); border: none;"></div>
</div>

I tried this below code:
here is also have my code (this code I generate with ChatGPT): https://codepen.io/alpesh88ww/pen/qBGqdez

below attached image like I need.

will look in desktop

will look in mobile