Creating a CSS masonry layout for an Ionic application

Categories

Masonry layouts have become a popular choice of UI for websites in recent years - the most notable of which is Pinterest - and in today's tutorial I'll show you how such a layout can be achieved using pure CSS.

To accomplish this we'll use the following CSS 3 standards (as well as discussing their respective pros and cons):

We'll also provide the necessary style rules to enable our layout to be responsive across iOS, Android and Web based viewports as well as exploring a fallback option for legacy browsers that don't support CSS Flexbox or Multi-column Layouts.

The application that we'll be developing will display a range of web technologies across differently coloured tiles like so:

When the application is resized within the browser, or viewed on a handheld device, the columns will automatically re-adjust to the size of the viewport:

This is a relatively simple set of style rules although we do need to pay attention to the following for the parent container:

display: flex;
flex-flow: column wrap;
height: 100vw;

In order for the browser to understand that we're using Flexbox we need to set the display: flex property and then define how we want elements within the parent container to be rendered using the flex-flow property.

Notice that we set this to a value of column wrap which determines how the content will reflow within the container.

Although this approach works there is one MAJOR drawback - we NEED to set a fixed height on the parent container.

Without this in place the elements within the parent container display as a single column.

This is clearly not ideal as we can't guarantee that our content will neatly render into columns across all viewports without being 'cut off' - particularly where some content is larger than others.....which brings us to our second approach.

Once again we use the @supports media query to determine if the browser 'recognises' the CSS Multi-column Layout standard.

We then assign the following rules (with additional vendor specific prefixes in place) to the parent container to define the initial number of columns for the interface and the gap between each of those columns:

column-count: 5;
column-gap: 0.5em;

We then use media queries to define breakpoints where the column count will be redefined according to a specific screen width.

The great thing about using CSS Multi-column Layouts is that the content will reflow correctly regardless of the height viewport dimensions.

We still need to add media queries though to redefine the column count at selected breakpoints otherwise the content will be 'squeezed' into the original number of columns fitting to that screen width (which is going to look odd on a smaller viewport).

Still, this approach to rendering a CSS only masonry layout is the preferred one.

Legacy support

Where app development is concerned the elephant in the room will always be support for certain technologies and features.

As browser support for CSS Flexbox and Multi-column Layouts is, relatively speaking, not widely supported we need to ensure that we have a fallback option in place for older platforms.

To implement this return to the same global stylesheet - ionic-masonry/src/app/app.scss - and add the following style rules, towards the bottom of the file:

Not quite as elegant as using CSS Multi-column Layouts to implement a masonry layout but it will, at the very least, display our content in a grid like format (even if, unfortunately, it isn't a masonry style interface) where those legacy browsers are concerned.

Templating

With our style rules in place all that remains is to add the necessary HTML to the ionic-masonry/src/pages/home/home.html project template (the featured logos are sourced from Google Images and saved within the project's assets/imgs directory with the paragraph texts generated and copied from lipsum.com):

Notice that each <section> element (which form our individual 'masonry' tiles) within the parent container is assigned a specific CSS class to provide the background colour for that 'tile'.

With this markup added to the HomePage component template let's now run this project in our desktop browser using the following CLI command:

ionic serve

Depending on which CSS approach you've used - Flexbox or Multi-column Layouts - you'll see a masonry layout consisting of 4 or 5 columns such as the following:

This can then be resized to demonstrate how the masonry layout responds and adapts to a smaller viewport.

In summary

Hopefully you've found the above tutorial useful and it's given you a taste for how a masonry layout can be applied to an Ionic project.

If you've enjoyed what you've read and/or found this helpful please feel free to share your comments, thoughts and suggestions in the comments area below.

I explore styling and theming for the Ionic framework within my e-book featured below and if you're interested in learning more about further articles and e-books please sign up to my FREE mailing list.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

In the following tutorial I'm going to guide you through using Angular FormBuilder, FormGroup and FormArray modules to dynamically add and remove input fields in forms for your Ionic framework applications...

In the following tutorial I'm going to guide you through using Angular FormBuilder, FormGroup and FormArray modules to dynamically add and remove input fields in forms for your Ionic framework applications...