List with 2 items per line

I’m trying to make a list that scrolls vertically but has 2 items per line like this:

Don’t know if this is possible?

You would add a Container (“List Container”) with another Container (“List Item”) set to repeat based on your data (or just add multiple child components).

Then, you’d make the List Item container’s width so that two fit side-by-side, set the List Container’s layout direction to horizontal and check the List Container’s Wrap children property. This makes child components wrap onto a new line if their width would exceed the available space.

Note that adding margins to 50% width causes the width to increase beyond 50%, so two components no longer fit side by side. An alternative is to go a bit deeper into flexbox (the underlying layouting methodology), and set under Dimension and position > Growing and shrinking > Advanced options e.g. *Flex grow: 1’, Flex shrink: 0 and Flex basis: 40% to make the items grow horizontally with the margins taken into account. For more on flexbox, see e.g. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2 Likes

Thank you very much!

1 Like

I can’t find list containers in my component section, there is only containers and rows

In the example, Harri has simply named the containers list container and list item. They are just regular containers :slight_smile:

1 Like

Oh thank you :smiley: