Images getting overlapped about react-stack-grid

[sreetamdas]

Closing this, the issue seems to be solved by the simple addition of a class which explicitly defines the width as 100%; I thought this would be implicitly defined by the package itself 🤔

Thanks for the package, really great stuff @tsuyoshiwada !

[sreetamdas]

Here's the code that I am using:

import React from "react";
import StackGrid, { transitions, easings } from "react-stack-grid";

const image_list = [
	{
		src: "/images/diogo-sousa-408287-unsplash.jpg",
		caption: "diogo-sousa-408287-unsplash",
	},
	{
		src: "/images/dylan-nolte-556274-unsplash.jpg",
		caption: "dylan-nolte-556274-unsplash",
	},
	{
		src: "/images/simon-migaj-452354-unsplash.jpg",
		caption: "simon-migaj-452354-unsplash",
	},
];

const transition = transitions.scaleDown;

export default class Gallery extends React.Component {
	render() {
		return (
			<StackGrid
				monitorImagesLoaded={true}
				columnWidth={600}
				duration={600}
				gutterWidth={15}
				gutterHeight={15}
				easing={easings.cubicOut}
				appearDelay={60}
				appear={transition.appear}
				appeared={transition.appeared}
				enter={transition.enter}
				entered={transition.entered}
				leaved={transition.leaved}
			>
				{image_list.map(obj => (
					<figure key={obj.src}>
						<img src={process.env.PUBLIC_URL + obj.src} alt={obj.caption} />
						<figcaption>{obj.caption}</figcaption>
					</figure>
				))}
			</StackGrid>
		);
	}
}

[sreetamdas]

Also, using #39 solution of setting monitorImagesLoaded={true} doesn't help either for some reason 😞