Repeating group dynamic number of columns?

I have a repeating group which will always have 4 fixed-width items. I would like to display the 4 of them in a row when width allows it. Otherwise, I’d like to display 2 rows of 2.

I haven’t been able to find a way to dynamically do this:

  • If I fix Repeating Group’s number of rows (1) and columns (4), then, on a small screen, the items will overlap each other and never overflow to a second row. Unfortunately, there aren’t conditional column/rows properties
  • If I leave Repeating Group’s number of rows empty, then the space between items will not be dynamic, which means that, on a large screen, I’ll end up with my four items pulled to the left instead of centered or “space-betweened”

Any idea on how to elegantly solve this without duplicating the repeating groups in a 4x1 and a 2x2 versions?

Hi @pprasquier,

The only way I’ve found is with some custom CSS as described here.

-Steve

Thanks, Steve!