Display different number of items per row-CodePudding

How do I display different number of items per row, using CSS? Something like a pyramid style.

1      2        3       4        5

   6        7        8       9          
       
      10        11       12

Assuming those numbers are images. I am using ACF gallery.

Do you have any ideas? Maybe using flexbox?

Thank you!!

CodePudding user response：

You can use flexbox and flex like below:

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery > img {
  flex: calc(100%/3); /* 3 images per row */
  min-width: 0;
  outline:1px solid red;
}
/* until the 9th 4 images per row */
.gallery > :nth-child(-n   9) {
  flex: calc(100%/4);
}
/* until the 5th 5 images per row */
.gallery > :nth-child(-n   5) {
  flex: calc(100%/5);
}

<div >
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
</div>