React Masonry items alignment issue

Question

I am using react masonry library: https://www.npmjs.com/package/react-masonry-component I have added three items with different width/height: image

import React from 'react';
import Masonry from 'react-masonry-component';

const gridItems = [
    { width:"200px",height: "200px"},
    { width:"100px",height: "100px"},
    { width:"100px",height: "100px"}
].map((i, index) => {

    return <div className={`grid-item`} style={{width: i.width, height: i.height}}>
        <div style={{backgroundColor: 'green', height: '100%'}}>{index}</div>
    </div>;
})

const gridView = (props) => {

    return <div className="">
        <Masonry
            className={'masonry-view'}
           >
            {gridItems}
        </Masonry>
    </div>;
}

export default gridView;

Issue is visible on attached image - third item is not aligned correctly. Does anyone know solution?

score 0 · Answer 1 · answered Jun 13 '19 at 16:58

0

SOLUTION: Problem was that I had not added columnsWidth property. So I created Options object and added columnsWidth to smallest column width and it worked.

answered Jun 13 '19 at 16:58

also you can write a reusable component to set options once and use those at all – Alex Jun 13 '19 at 17:01

Maxime · Answer 2 · 2020-10-28T14:26:18.627

0

To fix this issue I just fix the columnWidth to 1.

<Masonry
  options={{
     columnWidth: 1,
  }}
>
....
</Masonry>

edited Oct 28 '20 at 14:26

answered Oct 28 '20 at 14:02

Maxime

643
10
21

React Masonry items alignment issue

2 Answers2