Display a list of items in a grid layout.

The Grid Component is a special type of Collection Component that allows you to display items in a grid. It's the ideal choice when you want images to take center stage in your list like with collections of homes, products, or digital art. If you prefer to include a border around both the photo and the text, you may want to consider using the Card component.

Adding and Setting Up Grid Collections

To set up your Grid Collection:

  1. In the Layout Editor of your app, click the plus (+) symbol to add a new component.

  2. Find Collections in the menu and select Grid.

  3. Choose what Data Source it should use.

  4. Give the collection a Title.

  5. Customize your collection with Data and Design.

  6. Choose if you'd like to limit the number of items that appear, as well as how many items to show per page.

  7. Set Visibility Conditions for your data if needed.

To update your Grid Collection, go to the Components section, click on your collection, and make your desired changes. You can preview each change live as you make adjustments.

Adding an Action to your Collection

You can add Actions to your Grid Collection to allow users to interact with your data. For example, you can add a Button that takes users to a detailed view of a record or opens a form to submit information to you.

  1. Select your Grid Collection, then go to the Actions menu on the right side.

  2. Choose Enable advanced actions.

  3. Choose where to add the action.

  4. Choose from our menu of actions, or create your own custom action.

  5. Take your new action for a test run!

Frequently Asked Questions

Have a question about Grid? Ask the Glide community.

Updated more than a week ago
Was this article helpful?