If you don't have Ans, then plz don't do negative response, I need this that's why I ask here. who given negative response he, her "Mor Fkr", "Chutia", "ganu", "Bho****a"
Please help me to do 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