The Masonry layout packs items into columns at their natural proportions, fitting tall and wide images together snugly without cropping. It produces the staggered, brick-like arrangement familiar from Pinterest, and is the layout to reach for when a set has mixed orientations you do not want trimmed.
Location Gallery Settings → Layout → Layout Type → Masonry
How it works #
Masonry lays out a set of columns of equal width and drops each item into a column at its original aspect ratio. Because items keep their proportions, every column ends up a different height, and the items stagger to fill the space rather than lining up into rows. Nothing is cropped: a portrait photo stays tall and a panorama stays wide.
Masonry needs a proportional version of each image to measure column heights correctly, so it always uses a dedicated thumbnail derivative rather than the Thumbnail Size you may have set elsewhere. This is automatic and is the reason the layout looks right at any column count.
Masonry keeps every image at its original proportions, so the Item Aspect Ratio setting does not apply to this layout. Use the Grid layout if you want every item forced to one shape.
Generating the thumbnails
The proportional version Masonry relies on is created automatically for any image you upload after installing FotoGrids. For images that were already in your media library beforehand, that version may not exist yet, which can leave a Masonry Gallery looking uneven until it is generated.
FotoGrids includes a **Regenerate Thumbnails** tool that creates the missing sizes for your existing images, so there is no need to install a separate thumbnail-regeneration plugin for this. After running it once, your whole library is ready for Masonry. The tool is under **FotoGrids → Tools**.
When to use it #
Masonry is the natural choice for editorial and photo-led collections where each image deserves its own proportions: a mixed shoot of portraits and landscapes, a blog-style gallery, a moodboard. It shines when the set is varied and a uniform grid would crop too much away.
Settings #
Columns
Masonry uses the same column controls as the Grid layout.
| Setting | Columns Mode |
| Options | Fixed Auto |
| Default | Fixed |
Fixed uses an exact number of columns per device. Auto fits as many columns as a column-width range allows, adjusting the count as the screen changes.
| Setting | Number of Columns |
| Range | Desktop 1–12, Tablet 1–6, Mobile 1–4 |
| Default | Desktop 4 Tablet 3 Mobile 1 |
| Visible when | Columns Mode is set to Fixed |
| Setting | Column Width Range |
| Units | px em rem % |
| Default | Desktop 200–400 Tablet 180–350 Mobile 100–300 |
| Visible when | Columns Mode is set to Auto |
Item Order
Decides the path items follow as they fill the columns. This changes the reading order, which matters when the sequence of your images carries meaning.
| Setting | Item Order |
| Options | Row-major Column-major |
| Default | Row-major |
Row-major fills each row across before moving down, so items read left to right in roughly the order they appear in the Gallery. Column-major fills each column top to bottom before moving to the next column, so the first several items stack down the left side. Row-major keeps a more familiar reading order; column-major can give a tidier column balance when item heights vary a lot.
Item Spacing
The gap between items, set per device.
| Setting | Item Spacing |
| Range | Desktop 0–50, Tablet 0–40, Mobile 0–30 |
| Units | px |
| Default | Desktop 10 Tablet 8 Mobile 5 |
Margin and Padding
Space outside (Margin) and inside (Padding) the whole Gallery wrapper, set per device on all four sides. Both default to 0.
| Setting | Margin |
| Range | 0–100 per side |
| Units | px |
| Default | 0 |
| Setting | Padding |
| Range | 0–100 per side |
| Units | px |
| Default | 0 |
How this layout affects other settings #
Masonry leaves the broader settings available: Pagination, Filtering, and Sorting all work, and the Lightbox, Captions, item styling, and Hover Effects apply as normal. The one behind-the-scenes difference is the Thumbnail Size setting in the Media tab, which Masonry overrides with its own proportional derivative so column heights measure correctly. The Item Aspect Ratio and Item Fit settings do not appear for Masonry, because items keep their original shape.
Tips and recommendations #
Column count is the main lever on how Masonry feels. Fewer, wider columns give each image more presence and read more like an editorial spread; more, narrower columns pack the set tighter and suit large collections you want to browse quickly. As with Grid, Auto column mode is worth trying first, since it adapts the count to the screen on its own.
If the order of your images tells a story, keep Item Order on Row-major so visitors read them in sequence. Reach for Column-major only when you care more about even column heights than about reading order — for example a decorative wall of textures where sequence does not matter.
When a Gallery has very mixed heights, Masonry can leave one column noticeably longer than the others on the final stretch. This is normal for the layout and usually reads as natural. If a perfectly even bottom edge matters to you, the Justified layout fills each row flush instead.
