I have created a layout with Flexbox, to display 20 images, 6 in 1 row, and then the rest are hidden and viewable on scroll. I trying to create 2 rows with 6 images in each and then the rest images should same as it scrolls to see the next one on the right. Below is the code working code for 6 in one row,
.image-gallery { display: flex; overflow: hidden;}.image-gallery .row { display: flex; flex-wrap: nowrap; /* Prevent wrapping */ overflow-x: auto; /* Enable horizontal scrolling */ scroll-snap-type: x mandatory; /* Enable snapping behavior */ -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */}.image-gallery .row img { flex: 0 0 calc(100% / 6); /* Adjusted to display 6 images in a row */ scroll-snap-align: start; /* Align images to start */}<div class="image-gallery"><div class="row"><img src="https://picsum.photos/200/300?random=1" alt="Image 1"><img src="https://picsum.photos/200/300?random=2" alt="Image 2"><img src="https://picsum.photos/200/300?random=3" alt="Image 3"><img src="https://picsum.photos/200/300?random=4" alt="Image 4"><img src="https://picsum.photos/200/300?random=5" alt="Image 5"><img src="https://picsum.photos/200/300?random=6" alt="Image 6"><img src="https://picsum.photos/200/300?random=7" alt="Image 7"><img src="https://picsum.photos/200/300?random=8" alt="Image 8"><img src="https://picsum.photos/200/300?random=9" alt="Image 9"><img src="https://picsum.photos/200/300?random=10" alt="Image 10"><img src="https://picsum.photos/200/300?random=11" alt="Image 11"><img src="https://picsum.photos/200/300?random=12" alt="Image 12"><img src="https://picsum.photos/200/300?random=13" alt="Image 13"><img src="https://picsum.photos/200/300?random=14" alt="Image 14"><img src="https://picsum.photos/200/300?random=15" alt="Image 15"><img src="https://picsum.photos/200/300?random=16" alt="Image 16"><img src="https://picsum.photos/200/300?random=17" alt="Image 17"><img src="https://picsum.photos/200/300?random=18" alt="Image 18"><img src="https://picsum.photos/200/300?random=19" alt="Image 19"><img src="https://picsum.photos/200/300?random=20" alt="Image 20"></div></div>desired layout