React - Horizontal Masonry

Masonry.js

import MasonryTile from "./Tile";

const Masonry = ({ intl }) => (
<div className="masonry">
	<MasonryTile image="/static/images/women/hanzi_zhen.jpg" alt="Masonry Brick #1"/>
	<MasonryTile image="/static/images/women/hanzi_zhen.jpg" alt="Masonry Brick #1"/>
	<MasonryTile image="/static/images/women/hanzi_zhen.jpg" alt="Masonry Brick #1"/>
	<MasonryTile image="/static/images/women/hanzi_zhen.jpg" alt="Masonry Brick #1"/>
	<style jsx>{`
		.masonry {
		  display: flex;
		  flex-flow: row wrap;
		  margin-left: -8px;
		}
		
		.masonry-brick {
		  flex: auto;
		  height: 250px;
		  min-width: 150px;
		  margin: 0 8px 8px 0;
		}
		
		.masonry-brick:nth-child(4n+1){
		 width: 250px;
		}
		.masonry-brick:nth-child(4n+2){
		 width: 325px;
		}
		.masonry-brick:nth-child(4n+3){
		 width: 180px;
		}
		.masonry-brick:nth-child(4n+4){
		 width: 380px;
		}
	`}</style>
</div>



);

export default Masonry

Tile.js

import PropTypes from 'prop-types';

const MasonryTile = ({ image, alt }) => (
	<figure className="masonry-brick">
			<img src={image} alt={alt} className="masonry-img" />
	<style jsx>{`
	
	.masonry-img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	img {
		vertical-align: middle;
		max-width: 100%;
	}
	`}</style>
	
	</figure>
	
);

MasonryTile.propTypes = {
	image: PropTypes.string.isRequired,
	alt: PropTypes.string.isRequired,
};


export default MasonryTile