# Flex Repeater Grid

**URL:** <https://forum.inductiveautomation.com/t/flex-repeater-grid/111608>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 20, 2025, 9:54pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-grid/111608 "2025-10-20T21:54:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [October 20, 2025, 9:54pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-grid/111608/1 "2025-10-20T21:54:33Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![aaronrai24](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/aaronrai24/32/87248_2.png) [@aaronrai24](https://forum.inductiveautomation.com/u/aaronrai24)\
**Post date:** [October 20, 2025, 10:37pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-grid/111608/2 "2025-10-20T22:37:09Z")

</div>

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

elementStyle:

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

```

style:

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

```

that produced this result:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/1/81cb8ad3ce0b80d74e287be8f240e68c6c15ddea.png)

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [October 21, 2025, 1:29pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-grid/111608/3 "2025-10-21T13:29:00Z")

</div>

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.