Gallery Layouts

There are two main layouts available:

• Justified Layout
• Masonry Layout

Both feature a variety of configuration options to further adjust the look and feel. Head over to the Playground to try them out!

Justified Layout

The images are arranged in rows. The most important configuration option is targetRowHeight, which is the height the gallery tries to achieve for each row. However, it also wants to fills the whole width, thus the height might be adjusted slightly to achieve this. If a certain height must be achieved heightTolerance can be used to limit the flexibility given to the gallery. However, do not that images might be cropped to stick to this limit. The rowDeviation option can be used to select whether rows should be taller or shorter than the given target height.

As the last row most likely won't have enough images to fill the full width, it can be treated differently from the rest of the gallery. Its height tolerance can be adjusted separately and what happens when the height tolerance can't be fulfilled can be adjusted with the lastRowJustification configuration option.

Masonry Layout

The images are arranged in rows. The number of rows can be either specified through targetColWidth or targetColNumber. The gallery attempts to make the order of images readable from left to right and top to bottom. To achieve this, some columns are skipped if they are too far out from the other images of this row. The exact behaviour can be customized through the rowSkipFraction configuration option. A more traditional "masonry" layout can be achieved by setting the rowSkipFraction to 0. Then, images are repeatedly appended to the column of the smallest height. However, this will most likely result in images appearing out of order.