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

# Tiles

Items are laid in a repeating pattern of tiles. Pick one of 27 patterns in the **Tiles** modal (button **Edit Tiles**), or write your own.

![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-12-at-08.34.11-1024x582.png)![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-12-at-08.34.11-1024x582.png)    SettingValuesDefault**Tiles Type**One of the presets, or a custom pattern in the notation below`3|1,1|` (three equal square columns)**Gap**, **Vertical Gap**0 to 200 px15, empty![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-12-at-08.35.20-1024x583.png)![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-12-at-08.35.20-1024x583.png)    ## Presets

ColumnsPatterns1one wide row of half-height tiles26 patterns: squares, short, tall, and three mixed patterns315 patterns: squares, short, tall, and twelve mixed patterns with one large tile45 patterns: squares and four mixed patternsThe modal previews every pattern; the current one is highlighted.

![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-12-at-08.36.51-1024x583.png)![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-12-at-08.36.51-1024x583.png)    ## Notation

A pattern is `columns|width,height|width,height|…`:

- the first number is the number of columns;
- every `width,height` pair after it is one tile of the repeating pattern: width in columns, height as a multiple of the tile’s width.

`3|1,1|` is three columns of squares. `3|1,2|2,0.5|1,1|1,2|2,0.5|` is a three-column pattern where the first tile is one column wide and twice as tall as wide, the second spans two columns at half height, and so on. Limits: 6 columns, 24 tiles in a pattern, a tile may span at most 6 rows. Only digits, `.`, `,` and `|` are accepted.

Images are cropped to the tile. Set the focal point of an image (Media source: image settings; Posts: Featured image panel) to choose what stays visible.

Patterns with 4 columns or more use the Large (VP) image size, the others Extra Large (VP). See [Settings → Images](https://staging.visualportfolio.com/docs/settings/images/).

## Small screens

The column count of the pattern steps down with the screen width (see [Responsive behaviour](https://staging.visualportfolio.com/docs/gallery-blocks/layout/responsive-behaviour/)). Each tile keeps its proportions.

Developers can add presets with the `vpf_extend_tiles` filter.