Build a Pinterest Layout using HTML & CSS

Build a Pinterest Layout using HTML & CSS

Browse our Teachable courses.

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.

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 HTML & CSS