Flex Repeater Grid

Ignition
,
1

How can I display my instances in a grid format? They come in vertically by default, I’d assume there’s a way to change this to horizontal as well, though I don’t see it atm. Is there a way that I can set a grid size (i.e. 3x4 or something)? Or, is there a better component to use for this? Maybe a flex repeater?

2

I think this is easier to do with a flex repeater and these css props:

elementStyle:

{
  "classes": "",
  "minHeight": "fit-content",
  "height": "100%",
  "gridColumn": "span 1 / span 1"
}

style:

{
  "classes": "",
  "display": "grid",
  "overflow": "auto",
  "gap": "var(--s)",
  "gridTemplateColumns": "repeat(4, 1fr)"
}

that produced this result:

image
image716×480 36.8 KB

1 Like
3

How do I prevent the instances from ever overlapping. Right now, if the display height is too small they begin to overlap instead of overflowing.

Actually, getting rid of the elementStyle entirely got the overflow I was looking for.

I also just noticed the “wrap” option, so using that I was able to get a grid that will dynamically resize.

1 Like