The tiles layout is a highly customizable layout that allows you to create potentially thousands of different layouts for your lists.
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
If some or all of your list items don't have images, you can choose whether you want to show a title instead.
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 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.
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.
Padding refers to the space around your images. There are two padding options. Loose or tight.
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.
You can position the
Details properties under or inside your images by choosing
Overlay in the text style settings.
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.
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.
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.
Combining all of these settings gives you many different layout possibilities.
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.
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