Creating a Pinterest Layout in Ionic

2 min read

Originally published May 12, 2017

Check out my advanced Ionic tutorials at eliteionic.com

Ionic provides a useful Grid component that allows you to organise a layout using rows and columns. By default, if the columns contained within a row go beyond the width of the screen, they will flow automatically onto a new row. This makes it really easy to create a grid layout, like an image gallery, with an unknown quantity of items.

However, if the items are of varying sizes then the items will not sit well beneath each other. Individual rows will expand to the height of the tallest item, and there will be white space beneath the rest. Most people will be familiar with the layout of items in Pinterest, where everything flows nicely together even though each individual item may be of a different size. In this video tutorial, we will walk through how to create this Pinterest style layout in Ionic.

Click here to watch the video on YouTube