Build a Pinterest Layout using HTML & CSS
Tags: css, html, ux, design
Published: 2021-01-21 15:53:59

### <center>Build a Pinterest Layout using HTML & CSS</center>

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

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

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

![html-css-pinterest-layout](https://user-images.githubusercontent.com/58220766/105109900-7849f980-5a8b-11eb-91c0-42c8820abf52.png)

### Let's start by declaring some CSS variables.

In our CSS...

```
:root {
    --card_width: 250px;
    --row_increment: 10px;
    --card_border_radius: 16px;
    --card_small: 26;
    --card_med: 33;
    --card_large: 45;
}
```

**Note:**

* card_width: 250px
    * the width of our card/pin
* row_increment: 10px
    * we are using a CSS **GRID** to build our layout; technically, each card is made up of multiple **10px** increments **for the rows; not columns**
* card_border_radius: 16px
    * used to round the card's edges
* card_small: 26
    * a small card is made up of **10px * 26 increments** - with the margins included: 230 x 230
* card_medium: 33
    * a medium card is made up of **10px * 33 increments** - with the margins included: 230 x 300
* card_large: 45
    * a large card is made up of **10px * 45 increments** - with the margins included: 230 x 420

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

### With our variables set...

#### Let's write the HTML tree, then back to our CSS.

```
<div class="pin_container">
    <div class="card card_small"></div>
    <div class="card card_medium"></div>
    <div class="card card_large"></div>
</div>
```

**Note:**
Every card has the class **card** and a size.

#### The container is what powers our entire layout.

```
.pin_container {
    margin: 0;
    padding: 0;
    width: 80vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    display: grid;
    grid-template-columns: repeat(auto-fill, var(--card_width));
    grid-auto-rows: var(--row_increment);
    justify-content: center;

    background-color: 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**
* grid-template-columns - 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
* grid-auto-rows - 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
* justify-content - used to center ALL of the cards in the center of the container
* background-color - simply used for a color contrast

#### Each card simply has a margin and border radius.

```
.card {
    padding: 0;
    margin: 15px 10px;
    border-radius: var(--card_border_radius);
    background-color: red;
}
```

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

### 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/html-css-js-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 HTML & CSS</center>

{% youtube VTJ_0MplSwk %}