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
