DEV Community

loading...
Cover image for Build a Pinterest Layout using HTML & CSS

Build a Pinterest Layout using HTML & CSS

an-object-is-a
A video content creator.
・2 min read

Build a Pinterest Layout using HTML & CSS


Browse our Teachable courses.


html-css-pinterest-layout

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

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

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

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

Discussion (0)