DEV Community

Cover image for Build a Pinterest Layout using HTML & CSS
an-object-is-a
an-object-is-a

Posted on • Edited on • Originally published at anobjectisa.com

16

Build a Pinterest Layout using HTML & CSS

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

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay