Layout options in Dynamic Lists

When using a Dynamic Content List you have three different options for layout: Columns, Rows and Grid.

Columns & Rows

Standings Graphics presented as Rows in the first example and as Columns in the second example 

Columns and rows order items in certain direction: rows order elements vertically (1) and columns order elements horizontally (2).

They fit the amount of list items in the available space, dividing the space by the amount of items. If you want to display a fixed amount of items in screen, you can use list filters like pagination or limit.


Ranking in a 2x10 Grid Layout

Grid layout distributes items in the two dimensions. Unlike what happens when using Rows and Columns layout, Grid layout has a fixed amount of slots and divides the available space based on slots, ignoring the amount of list items for distributing space.

In the inspector you will find the properties to configure your grid:

Rows and Columns fields are for establishing the amount of rows and columns for the grid.

Gaps are the empty spaces between rows & columns. They are expressed in percentage relative to the Dynamic List size. By default both are modified together, but you can unlink this by clicking in the link icon.

Direction is the content filling direction: elements from your list will be ordered horizontally if you choose the 'Z' icon, and vertically if you choose the 'inverted N' icon.

Details about amount of items and fixed grid

It's important to notice the grid layout will render only the amount of items that fit in the defined grid slots.  As an example, when using a 3x3 grid, it will fit the items into 9 slots, despite the connected content has 7 or 10 items. Keep in mind items not fitting into the grid will be lost, as detailed in the image below:

Pro tip: when using grids to display an amount of items larger than the available slots, add pagination to the list and set it to the same amount of available slots. This way, you won't lost any list item.

Was this article helpful?