Using App Connect Masonry with Static Layouts

In our case we are using a bootstrap 3 grid, but this can be applied to any layout, so bootstrap 3 is not mandatory.

You know it can be a real problem to create a layout based on columns when you are using elements with different heights in each row. You can see that the elements are not properly aligned. This is where the app connect masonry is really helpful. First, add app connect to your page (1).

Let's switch to split view so you can see the elements we select (1). We select the parent element which wraps our cells. In our case, this is the bootstrap 3 row element (2). When you select the parent element in the div inspector, click the add new component button (3). Open extend with (4), and click masonry (5). 

We add an ID for the masonry component (1). Then, in the expression field, enter "1". This is required when using masonry with static data (2). Select whether to preserve order or not. The preserve order option will position items in a masonry layout, but maintains the exact  left to right order. When you turn this option off, masonry will discard horizontal order and will position items in a way that it equalizes the columns heights (3). Select whether to animate masonry elements when the container is resized (3). Enter the animation duration in milliseconds (4).

Now, let's setup the columns for different screen sizes.

The default option will be used for any screen sizes if nothing else is defined. We set this to 1 column, as this will be applied for the smallest screen sizes (1). For small screens or screens with width equal to or larger than 480 pixels, we enter 2 columns (2). Medium screens or screens with width equal to or larger than 768 pixels, we enter 3 columns (3). If we don't enter anything for the large and extra large screens, they will inherit this value (3). We enter 4 columns for large screens (4) and 6 columns for extra large screens (5). You can setup the horizontal spacing between elements for different screen sizes in the same way. Enter the width in pixels (6). We enter 0, as we use bootstrap 3 grid, which already has horizontal spacing applied to the elements. We leave the rest of the fields empty, as they will inherit the default value. 

And we are done! Let's preview the results.

You can see that our elements are nicely arranged in columns. As soon as the screen resizes, the columns number change and the elements are animated. That's how easy it is to use app connect masonry, with static layouts.