The easiest way to build the Pinterest Layout without using a framework

Modern web design is at the forefront of the industry. The usual CSS grid layout with equal spacing is quickly losing popularity, whereas the Pinterest layouts with unlimited scrolling are quickly taking over as the standard. This article provides an in-depth look at creating the Pinterest layout.

The Pinterest layout, often known as the masonry layout, arranges elements one after the other in a linear fashion. Items will fill in any gaps left by shorter items in the first line when they migrate to the following line.

In plainer language, HTML elements such as images or card elements can be displayed on a website in a visually appealing and space-efficient manner. Pinterest is the most well-known application of the masonry layout, it is known as the "Pinterest Layout " for this reason. The Pinterest layout excels in lengthy lists and flexible layouts.

Additionally, websites that use photographs as their "highlight" often find that the Pinterest layout is the best option. Visual imagery always has a significant impact on the perceived worth and memorability of a website's user experience.

The Pinterest layout solves these two issues.

• The images on a website have to stand out.
  At least some if not all of the images in a website should stand out. These visuals are used to convey the significance of the aspects i.e drawing users to certain pages or CTAs.

• The much more satisfying view of the dynamic layout.
  With different row sizes, scrolling would be more entertaining and interactive, especially when designing for mobile screens.

The Pinterest layout can be constructed in a variety of ways. Some would need complex calculations, while others would need CSS and Javascript. Here are a few of the most straightforward solutions.

1. The CSS Flexbox
2. The CSS Grid
3. The CSS column

The CSS Flexbox

The use of CSS Flexbox and a little Javascript is required for this technique. The basic idea here is to create div elements based on the number of columns, attach those div elements to the main container, and place the former boxes in the corresponding column.

The concept in infographics,

• Javascript is used to obtain the container that requires the Pinterest layout

• Based on the necessary amount of columns, Javascript would be employed to create new div elements. Three were selected as the number of columns, therefore three div elements were created.

• The previous div elements (boxes) are divided throughout the columns to generate the Pinterest layout.

The Grid-Masonry

The use of a CSS grid would be employed for this layout. The columns will serve as the grid axis and the rows will be the masonry axis. This layout is structured using the grid-template-columns and the grid-template-rows.

.container { 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  grid-template-rows: masonry;
}

That, however, only functions in Firefox. For other browsers, this is the workaround.

The .boxes class would be added to all the elements in our container.

.boxes {
  width: 100%;
  height: 100px;
  grid-row: auto / span 1;
}

The grid-row: auto / span 1; tells the element to span across one row. The row height that was selected was 100px. The remaining boxes should either span across double or triple rows which means they should either be double or triple the height respectively.

.box-1 {
  height: 200px;
  grid-row: auto / span 2;
}

.box-2 {
  height: 300px;
  grid-row: auto / span 3;
}

With that, The Pinterest layout has been achieved.

The CSS Columns

This is the simplest solution setting that doesn't need calculations or Javascript. Although it reorders the div elements, it is still the most sought-after solution.

The column is added to the masonry container

.boxes-con {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  column-gap: 20px;
  }

Even while this works, there is one thing you must remember. The CSS multi-column style was designed for text and enables text to break inside; however, the Pinterest layout does not require this. The solution would be to add break-inside: avoid-column; to the child element of the container.

.boxes {
break-inside: avoid-column;
}

The Pinterest layout has been achieved.

The End

It will be ideal to use the layout now that you are fully informed of how to construct the Pinterest layout. Along with improving the website's aesthetic, the Pinterest layout can also give it improved functionality. Other Examples of the Pinterest layout design in action might be image galleries, blog postings, news websites, etc.