Tutorial hero
Lesson icon

Creating a Pinterest Layout in Ionic

Originally published May 12, 2017 Time 1 mins

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

Learn to build modern Angular apps with my course