Row based ordered images

[Shahzayb]

Images are rendered in the following order in 3 columns layout. note: numbers indicate index in the array.

img1     img4     img7
img2     img5     img8
img3     img6     img9

But I want row-based order described below.

img1     img2     img3
img4     img5     img6
img7     img8     img9

How to achieve that?

[paulcollett]

That's what this component does, so your in luck! If it's not for any reason, double check the docs and if you continue to have issues please post some more info and your code

On Wed, May 6, 2020 at 9:14 PM Shahzaib Sarwar notifications@github.com wrote:

Images are rendered in the following order in 3 columns layout. note: numbers indicate index in the array.

img1 img4 img7 img2 img5 img8 img3 img6 img9

But I want row-based order described below.

img1 img2 img3 img4 img5 img6 img7 img8 img9

How to achieve that?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/paulcollett/react-masonry-css/issues/53, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAORBBWDDZMJ5NOJ7O7JOJTRQIYTJANCNFSM4M27QZFQ .

[Shahzayb]

That's what this component does, so your in luck! If it's not for any reason, double check the docs and if you continue to have issues please post some more info and your code … On Wed, May 6, 2020 at 9:14 PM Shahzaib Sarwar @.> wrote: Images are rendered in the following order in 3 columns layout. note: numbers indicate index in the array.*** img1 img4 img7 img2 img5 img8 img3 img6 img9 But I want row-based order described below. img1 img2 img3 img4 img5 img6 img7 img8 img9 How to achieve that? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#53>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAORBBWDDZMJ5NOJ7O7JOJTRQIYTJANCNFSM4M27QZFQ .

I've read the docs. But I want my recent images in the first row, not in the first column. There should be a property like flow=row|col to specify the direction.

[paulcollett]

Sounds like something isn't working as expected in your setup. Can you please post your JS and CSS code so we can take a further look

[Shahzayb]

  .masonryGrid {
    display: flex;
    margin-left: -1rem; /* gutter size offset */,
    width: 'auto',
  }
  .masonryGridColumn {
    padding-left: 1rem; /* gutter size */,
    background-clip: padding-box;
  }

const breakpointColumnsObj = {
  default: 3,
  992: 2,
  768: 1,
};

<Masonry
          breakpointCols={breakpointColumnsObj}
          columnClassName={classes.masonryGridColumn}
          className={classes.masonryGrid}
        >
          {photos}
</Masonry>

[rickhlx]

@Shahzayb were you able to get this working?