Creating a Pinterest style layout

We now have a functional app, but it's nowhere close to looking good. So, let's add some CSS styles to give it that neat finish.

The class named pin-layout was there for a purpose. We are going to create a Pinterest-style layout to display our box office movies.

To do this, we make use of the CSS3 property called column-count, which automatically converts your data into a multicolumn layout.

Let's open our app/css/app.css file and add the following CSS classes:

.pin-layout{
        column-count: 4;
        column-gap: 0px;
        -moz-column-count: 4;
        -moz-column-gap: 0px;
        -webkit-column-count: 4;
        -webkit-column-gap: 0px;
}

The preceding code sets the column count to 4 and the gap between two columns to 0.

Tip

The column-count and column-gap properties are supported in IE10 and Opera, We use browser prefixes such as -moz and -webkit to get it to work in Firefox, and Chrome and Safari respectively.

Save the file and test it on the browser...