Using Pure CSS To Make Pinterest Styled Website

Pinterest Styled Board
Pinterest Styled Board

For a long time, I wanted to make a website like Pinterest. The infinite scroll with those beautiful looking small shiny boxes with cool pictures, which almost gives you a feeling of art gallery or a museum on your screen. Well I got fascinated by it and I was stalling it for a long time to learn how to do it. Finally, when I was going through FreeCodeCamp’s “Stylize the Camper News”, I was totally motivated to learn and use it to make a Pinterest Styled Camper News. Lots of people suggested me Masonary.js, but I was just stuck on to make it in CSS. Masonary is a very good option, probably better than what I am suggesting but I like to style things in CSS and like to handle data with JavaScript(for most of the part). I know its impossible to do so, but for some reason I just wanted to use CSS in this project and lo and behold, I found the solution with CSS3.

The important components:

In outer container:

        column-count: 5;
	column-gap: 15px;
	column-fill: auto;

And the repetitive boxes(rectangles) inside it, will contain:

        display: inline-block;
        column-break-inside: avoid;

Demonstration:

See the Pen Using Float to Place Article Elements Side-by-Side by Harshal Carpenter (@McQuinTrix) on CodePen.

It is still not fully supported by any browser, you will have to use -webkit- with Chrome & Safari and -moz- with Mozilla. Internet Explorer 10 and Opera 11.1 supports it.

There is one fallback to it: every inner box loads at the same time and it could prove to be a big burden for a page to load in first go. You will have to make it more responsive using @media queries. For example, this pen I designed for FreeCodeCamp’s camper news is optimized for mobile browser too.

See the Pen FreeCodeCamp Camper News by Harshal Carpenter (@McQuinTrix) on CodePen.

Find more information on CSS-Tricks.

Mozilla Docs on: column-gap, column-count, and column-fill

Be the first to comment

Leave a Reply

Your email address will not be published.


*