Chips with equal distance

I’m generating s sequence of Chip-UI-components by using the dynamic list behavior of a row coponent.
This leads to distributing the chips within a flexible grid. However, the Chips are of different width depending on the text label. For instance, I’m getting this:
image

What I want to achieve is, that the distance between Chips is fixed and the space of a row is covered by as much Chips as possible, like this:
image

Is this possible somehow?

Just to add this:
Chips also tend to merge when screen width is reduced:
image

Hello @Klaas_Klever

I believe you need to use the Block component instead of Row because the Row component renders Cell components that are designed for grid layout

Cool! This works! Dynamic Lists are a great concept. In addition, in the Flex-Section of the block, I’ve set the field “Flex Wrap” to “Wrap”, so that Chips are wrapped into a new row if there are too many of them.
Thanks

1 Like