Working with the tiles layout

The tiles layout is a highly customizable layout that allows you to create potentially thousands of different layouts for your lists.

Data

Like other layouts, the tiles layout has properties that you can connect with the data in your sheet. After you choose the tiles layout, you can then choose which columns show up as a Title, Details and Image.

Options

If some or all of your list items don't have images, you can choose whether you want to show a title instead.

Design

Image is

You can choose whether you wish to show an image in your tiles, or a map. If you choose Image is URL, then the property Image in the Data section needs to be connected to a column that contains an image link.

If you choose Image is Map from address then the property Image in the Data section needs to be connected to a column that contains an address or co-ordinates.

Tile shape

Tile shape simply changes the ratio of the tile. Bear in mind that the next setting, Tiles per row will effect the size of your tiles. You can choose between circles and a range of different rectangular shapes.

Tiles per row

You can have 1, 2, 3 or 4 tiles per row. By using only Tile shape & Tiles per row, you already have the ability to generate many potential layouts.

Combining the settings 'Tile shape' and 'Tiles per row'

Padding

Padding refers to the space around your images. There are two padding options. Loose or tight.

Loose padding (left) tight padding (right)

Corners

In the image above, you can see that the corners of each image are slightly rounded. Sometimes this will work well, and sometimes this won't work as well. For example, tight padding + rounded corners in the image above looks a tiny bit messy.

Instead, if we choose Sharp corners, our layout starts to look a little neater.

Switching between sharp and round corners

Text Style

Position

You can position the Title and Details properties under or inside your images by choosing Below or Overlay in the text style settings.

Alignment

When you choose Overlay as the setting for Position, a new section will appear called Alignment. This allows you to choose where in the image your text will appear.

Text size

You can choose three different sizes for your text: small, medium or large and you can also toggle whether the title is All-Caps or not.

Text wrapping

When you choose Below as the setting for position, a new toggle will appear called Allow text wrapping. You may want to enable this if you have chosen a large text size and your text is being clipped.

Enabling text wrapping

Combining all of these settings gives you many different layout possibilities.

Playing with multiple text style settings

Action

At the very bottom of the right side panel is the Action section. By default, all Lists have the action Link detail screen enabled. This means that when you tap on a list item you will go to that item's Details Screen.

However, you can disable this action and prevent your list items from doing this.

Inline lists & horizontal scrolling

You can use the Tiles layout with Inline lists and the List relation. If you use the layout with Inline lists, you gain access to an extra feature - horizontal scrolling.

The app below shows three inline lists with horizontal scrolling applied.

To apply horizontal scrolling to your inline list, click on the component in the right side bar, set the layout to Tiles and then toggle the Orientation setting to Horizontal.