DEV Community

Cover image for Build a Pinterest Layout In ReactJS
an-object-is-a
an-object-is-a

Posted on

Build a Pinterest Layout In ReactJS

Build a Pinterest Layout using ReactJS


Browse our Teachable courses.


reactjs-pinterest-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>
    )
}
Enter fullscreen mode Exit fullscreen mode

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'
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

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'
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Hey, thanks for sharing :)

Collapse
 
tupynamba profile image
Gwyra bebe pimentel

Tens mais exemplos grato