Group components together in a custom container.

The Container component acts as a parent inside which you can add child Components. This allows you to style, arrange, and add conditions to groups of Components.

Adding and Setting Up the Container Component

  1. In your Layout Editor of your app, select the tab you want to edit.

  2. Click on the plus (+) symbol in the Components.

  3. Select the Container component.

The Container component allows you to create column layouts and arrange components side-by-side. For example, the app below shows a side-by-side layout using two columns.

A side-by-side layout using two columns.

When you choose a layout that is more than one column you'll see sections underneath the Container Component with dividers. This shows you the different sections for your container which will change depending on the number of columns you have.

Sections in a container component.


In the General tab on the right side of the Layout Editor, locate the Design section. The Container component allows you to configure the following design options:

Design options in the container component.
  • Background for your Container: None, Card, Accent, Dark, Highlight, or Image.

  • Padding: Normal, Large, or XLarge

  • Width: Large, Medium, or Small


Sometimes you want to set the same Visibility Condition on multiple components. Rather than creating the same condition on each individual component, you can group them all into a container and set one condition on that container. For example, in the app below there are two containers. One container is set to be visible if a user is an admin and the other is visible to all users.

Adding conditions to the container component.

Have a question about Container? Ask the Glide community.

Updated more than a week ago
Was this article helpful?