Skip to content

Instantly share code, notes, and snippets.

@elievischel
Last active March 12, 2022 03:30
Show Gist options
  • Save elievischel/32e22351326a121466c5ef4636b486e0 to your computer and use it in GitHub Desktop.
Save elievischel/32e22351326a121466c5ef4636b486e0 to your computer and use it in GitHub Desktop.
React - Horizontal Masonry
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
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment