Working with the tiles layout

The Tiles Layout is a highly customizable and versatile style that enables us to add multiple configurations to our lists.

Data

Similar to the other styles, the Tiles Layout has properties that we can connect with the columns in our database. Once we have selected the Tiles Layout, we can determine which columns to display 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

We can choose whether to display an image or a map in our Tiles layout. If we select 'Image URL', then the property Image in the Data section needs to be connected to a column that contains an image link.

On the other hand, if we select 'Image' as 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 enables us to modify the shape of our Tiles. We can choose from a broad selection of shapes, from a square to a circle or various rectangular options.

Tiles per row

With Tiles per row, we have the ability to choose how many tiles we want to display in each row, either 1, 2, 3, or 4.

Padding

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

Corners

In the image above, we can perceive that the corners are slightly rounded. At times, rounded corners may fit our design. However, there are occasions when rounded corners may not be the best choice. For instance, tight padding and rounded corners do not go together. Therefore we can select Sharp Corners to make our design look more elegant.

Text Style

Overlay position

We can place the Title and Details properties beneath or within our tiles, by choosing Below or Overlay in the Text Style settings.

Text alignment

Suppose we select Overlay as the setting for Position. In that case, a new section will appear called Alignment, enabling us to choose where in the image we place our text.

Text wrapping

When we choose Below as the setting for our text Position, a new toggle will appear called Allow text wrapping. We may want to enable this if we have chosen a lengthy text that is being cut.

Action

At the very bottom of the right side panel is the Action section. By default, all Lists have the action Show Detail Screen enabled. This means that when we tap on a list item we will be redirected to that item's Details Screen.

However, we can disable this action and prevent your list items from doing this, or simply select another action from the list.

Inline lists & horizontal scrolling

We can use the Tiles layout with Inline lists and the List relation. If we 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 sidebar, set the layout to 'Tiles', and then toggle the Orientation setting to 'Horizontal'.

Only Show a Few Items

In the Tiles layout, we have the option to limit how many items are displayed in our app. In addition to this, we can choose when to display the "Show all" button. When we click "Show all" the app will redirect us to a list that will display all our items.

If you select both, Limit number of items and Show "See all" for more than, when you click on "See all", Glide will limit the number of items displayed based on your choice. You can set only Show "See all" for more than to avoid this.

This option works for both vertical and horizontal layouts.