Build a Pinterest Layout In ReactJS

Build a Pinterest Layout using ReactJS

Browse our Teachable courses.

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 want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Build a Pinterest Layout using ReactJS