Build a Pinterest Layout in React

Get Pinterest’s unique grid layout

We’ll only need 2 Components

A ‘PinterestLayout.js’ component that we’ll use for the Pinterest board.

A ‘Card.js’ component that we’ll use for the actual pins on the board.

Let’s write the PinterestLayout component

It’s a very simple component:

function PinterestLayout() {
 return (
 <div style={styles.pin_container}>
 </div>
 )
}

The container is what powers our entire layout.

const styles = {
 pin_container: {
 margin: 0,
 padding: 0,
 width: ‘80vw’,
 display: ‘grid’,
 gridTemplateColumns: ‘repeat(auto-fill, 250px)’,
 gridAutoRows: ‘10px’,
 position: ‘absolute’,
 left: ‘50%’,
 transform: ‘translateX(-50%)’,
 justifyContent: ‘center’,
 backgroundColor: ‘black’
 }
}

Note:

• margin — simply used to normalize our container
• padding — simply used to normalize our container
• width — this boundary will determine how many cards are displayed horizontally, before they wrap around to the next row; higher width = wider layout
• display — using a CSS grid
• gridTemplateColumns — each card’s column has a width AND this repeats to auto fill till the end of our container’s width; if the next card would overlap the width of our container, then that card starts on the next row
• gridAutoRows — each new row has a height of 10px
• position — simply used to center our entire layout; you can position anywhere you want
• left — simply used to center our entire layout; you can position anywhere you want
• transform — simply used to center our entire layout; you can position anywhere you want
• justifyContent — used to center ALL of the cards in the center of the container
• backgroundColor — simply used for a color contrast

Let’s write the Card component

Again, a very simple component.

function Card(props) {
 return (
 <div style={{
 …styles.card,
 …styles[props.size]
 }}>
 </div>
 )
}

Our Cards come in three sizes.

const styles = {
 card: {
 margin: ‘15px 10px’,
 padding: 0,
 borderRadius: ‘16px’,
 backgroundColor: ‘red’
 },
 small: {
 gridRowEnd: ‘span 26’
 },
 medium: {
 gridRowEnd: ‘span 33’
 },
 large: {
 gridRowEnd: ‘span 45’
 }
}

Note: gridRowEnd — we control the height of each card with this property; since each row is 10px, a span of 26 would translate to a height of 260px

You have the basic layout ready-to-go. Just insert whatever you want in those cards.

You can get the source file here.

If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Be sure to follow us on Instagram and Twitter to keep up with our latest Web Development tutorials.