Closed ComputerCarl closed 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;
Solved with vertical-align: top for img. https://stackoverflow.com/questions/43533790/css-masonry-problems
vertical-align: top
img
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.