Build a Pinterest Layout In ReactJS
Tags: react, javascript, webdev, ux
Published: 2021-02-12 15:08:14

### <center>Build a Pinterest Layout using ReactJS</center>

------------

#### <center>Browse our [Teachable](http://anobject.teachable.com "Teachable") courses.</center>

------------

![reactjs-pinterest-layout](https://dev-to-uploads.s3.amazonaws.com/i/p474p05v7hrhyk0qrprh.png)

### 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](https://github.com/an-object-is-a/reactjs-pinterest-layout "here").

------------

#### <center>If you want a more in-depth guide, check out my full video tutorial on YouTube, **[An Object Is A](https://www.youtube.com/c/anobjectisa "An Object Is A")**.</center>

### <center>Build a Pinterest Layout using ReactJS</center>

{% youtube baBvJDmziGQ %}