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

# Layout

**Block settings → Layout → Layout Items.** The layout decides how items are placed. Five layouts exist; each has its own settings, and all of them share the Gap settings.

LayoutUse it forColumns**[Tiles](https://staging.visualportfolio.com/docs/gallery-blocks/layout/tiles/)** (default)A repeating pattern of tiles of different sizes, “metro” styleFrom the chosen pattern (1 to 4 in the presets, up to 6 with a custom pattern)**[Masonry](https://staging.visualportfolio.com/docs/gallery-blocks/layout/masonry/)**Columns of images at their own aspect ratio1 to 5**[Grid](https://staging.visualportfolio.com/docs/gallery-blocks/layout/grid/)**Equal columns and rows; every item cropped to the same ratio1 to 5**[Justified](https://staging.visualportfolio.com/docs/gallery-blocks/layout/justified/)**Rows of the same height that fill the width, as on Flickrnone; row height instead**[Slider](https://staging.visualportfolio.com/docs/gallery-blocks/layout/slider/)**A carousel: one or several slides at a time, arrows, bullets, thumbnailsslides per view 1 to 6![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-11-at-18.05.24-1024x581.png)![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-11-at-18.05.24-1024x581.png)    The inserter also offers each layout as a variation (“Visual Portfolio Tiles”, “Visual Portfolio Masonry”, and so on).

## Gap

SettingValuesDefaultNotes**Gap**0 to 200 px15Space between items (between slides for Slider)**Vertical Gap**0 to 200 pxemptySpace between rows when it should differ from Gap. Empty means “same as Gap”. Not available for Slider## Columns on small screens

Column counts are for wide screens. All layouts step down on narrower screens; see [Responsive behaviour](https://staging.visualportfolio.com/docs/gallery-blocks/layout/responsive-behaviour/) for the exact widths.