title: Why is react masonry component not working?
body: <p>I'm testing out react-masonry-component with some images. </p>
  
  <p>But for some reason the images didn't turn out correctly in a masonry-like arrangement. Instead they just line up in one column like below.</p>
  
  <p>Does anyone know what I did wrong? Below is my code for the component and CSS.</p>
  
  <p>: <a href="https://i.stack.imgur.com/6kFsJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6kFsJ.png" alt="enter image description here"></a>. </p>
  
  <p>Gallery Component:</p>
  
  <pre><code>import React from 'react';
      import Masonry from 'react-masonry-component';
      import './grid.css';
  
      const masonryOptions = {
          transitionDuration: 0
      };
  
      const imagesLoadedOptions = { 
          itemSelector: '.grid-item',
          columnWidth: '.grid-sizer',
          percentPosition: true,
       }
  
      class Gallery extends React.Component {
          constructor(props){
              super(props);
              this.state={elements:[
                  {src:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg"},
                  {src:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg"},
                  {src:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg"},
                  {src:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg"},
                  {src:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg"},
  
              ]}
          }
  
  
          render() {
              const childElements = this.state.elements.map(function(element,index){
                  return (
                       &lt;div key={index} className='grid-item'&gt;
                           &lt;img src={element.src} /&gt;
                       &lt;/div&gt;
                   );
               });
               return (
                  &lt;Masonry
                  className={'.grid'} // default ''
                  elementType={'div'} // default 'div'
                  options={masonryOptions} // default {}
                  imagesLoadedOptions={imagesLoadedOptions}
                  disableImagesLoaded={false} // default false
                  updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
              &gt;
              &lt;div className="grid-sizer"&gt; {childElements}&lt;/div&gt;
  
  
                 &lt;/Masonry&gt;
              );
  
              }
      }
  
      export default Gallery;
  </code></pre>
  
  <p>CSS File:</p>
  
  <pre><code>/* ---- grid ---- */
  .grid {
      max-width: 100%;
      padding: 5px;    
      margin: 5px
  }
  
  /* ---- grid-item ---- */
  .grid-sizer{
      width: 33.333%;
  
  }
  .grid-item {
      width: 33%;
      height: 20%;
      float: left;
  }
  
  .grid-item img {
      display: block;
      width: 100%;
    }
  </code></pre>