eiriklv / react-masonry-component

A React.js component for using @desandro's Masonry
MIT License
1.44k stars 145 forks source link

Remove gutter on the bottom of every tile #108

Closed ComputerCarl closed 6 years ago

ComputerCarl commented 6 years ago

I cannot get rid of the spacing on the bottom of every tile.. I have tried setting margins and padding to 0, but will not go away.

import React, { Component } from 'react';
import Masonry from'react-masonry-component';

var masonryOptions = {
  transitionDuration: 0
};

var masonryContainerStyle = {
  width: "100%"
}

var masonryItemStyle = {
  width: "300px"
}

var masonryImgStyle = {
  width: "300px"
}

var handleClick = (ev) => console.log(ev.target);

class App extends Component {
  getArr = () => {
    var inArr = [];
    for (var i=0;i<7;++i) {
      inArr.push(`${i}.jpg`);
    }
    return inArr;
  }
  render () {
      var childElements = this.getArr().map(element =>
              <div style={masonryItemStyle} >
                  <img  style={masonryImgStyle} alt="" src={"/img/" + element} />
              </div>
      );

      return (
          <Masonry
              className={'my-gallery-class'} // default ''
              style={masonryContainerStyle}
              onClick={handleClick}
              gutter={0}
              elementType={'div'} // default 'div'
              options={masonryOptions} // default {}
              disableImagesLoaded={false} // default false
              updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
          >
              {childElements}
          </Masonry>
      );
  }
};

export default App;
ComputerCarl commented 6 years ago

Solved with vertical-align: top for img. https://stackoverflow.com/questions/43533790/css-masonry-problems