Search code examples
htmlcssflexbox

Create two scrollable to right rows with fixed HTML code

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 enter image description here

Solution

  • You could "manually" distribute the images to the second row by separating the rows out into separate <div> elements:

    .image-gallery {
  overflow: hidden;
  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 {
  display: flex;
  flex-wrap: nowrap;
  /* Prevent wrapping */
}

.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">
  </div>
  <div class="row">
    <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>

    Or, to keep using a single parent, you could use a grid layout:

    .image-gallery {
  display: flex;
  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 {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: repeat(6, 1fr);
}

.image-gallery .row img {
  /* 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>