---
title: "Masonry"
date: 2020-11-17
author: "nK"
---

# Masonry

Items are placed in columns; each image keeps its own height, so columns fill up unevenly.

![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-12-at-08.39.17-1024x582.png)![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-12-at-08.39.17-1024x582.png)    SettingValuesDefaultNotes**Columns**1 to 53**Media Aspect Ratio**Auto, Wide 16:9, Ultra Wide 21:9, TV 4:3, Classic Film 3:2, Custom (width and height numbers)AutoAuto keeps the original ratio of every image. Any other value crops all images to that ratio, which turns the masonry into an even grid**Horizontal Order**on / offoffTries to keep items in left-to-right order across the columns. The description in the panel warns that it does not always work as expected: an item that does not fit the next slot is placed where it fits**Gap**, **Vertical Gap**0 to 200 px15, empty![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-12-at-08.40.25-1024x582.png)![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-12-at-08.40.25-1024x582.png)    Four or five columns use the Large (VP) image size, one to three columns Extra Large (VP).

## Small screens

Columns setAbove 1200 px993 to 1200 px769 to 992 px577 to 768 px576 px and below554321444321333321222221111111The widths are the Responsive Breakpoints (Pro can change them in [Settings → General](https://staging.visualportfolio.com/docs/settings/general/)). See [Responsive behaviour](https://staging.visualportfolio.com/docs/gallery-blocks/layout/responsive-behaviour/). To force a different count with CSS, see the FAQ [How to change the number of columns on mobile screens](https://staging.visualportfolio.com/docs/faq/how-to-change-number-of-columns-in-masonry-on-mobile-screen/).