# Making nested grid for displaying components in Flex Repeater

**URL:** <https://forum.inductiveautomation.com/t/making-nested-grid-for-displaying-components-in-flex-repeater/51782>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [October 9, 2021, 3:37pm UTC](https://forum.inductiveautomation.com/t/making-nested-grid-for-displaying-components-in-flex-repeater/51782 "2021-10-09T15:37:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![phandc](https://avatars.discourse-cdn.com/v4/letter/p/ce73a5/32.png) [@phandc](https://forum.inductiveautomation.com/u/phandc)\
**Post date:** [October 9, 2021, 3:37pm UTC](https://forum.inductiveautomation.com/t/making-nested-grid-for-displaying-components-in-flex-repeater/51782/1 "2021-10-09T15:37:51Z")

</div>

Hi everyone.  
I’m trying to make a nested grid in a Flex Repeater container.  
I have a custom component then I try to repeat it using Flex Repeater. The problem happens when I want to display in a nested grid instead of following one row/ column direction in the flex container. For example, if have 9 components, it will display as a grid of 3x3 components. In web design, we also have the terminology called [grid](https://mui.com/components/grid/#how-it-works).  
I still wonder how I can use the script to do that in perspective.

Thank you so much for your time!

---

<div class="post-metadata">

**Author:** ![mcgheeiv](https://avatars.discourse-cdn.com/v4/letter/m/71c47a/32.png) [@mcgheeiv](https://forum.inductiveautomation.com/u/mcgheeiv)\
**Post date:** [October 9, 2021, 3:45pm UTC](https://forum.inductiveautomation.com/t/making-nested-grid-for-displaying-components-in-flex-repeater/51782/2 "2021-10-09T15:45:16Z")

</div>

An illustration might help me understand exactly what you want, but it sounds like you need to allow wrapping in the flex repeater.

---

<div class="post-metadata">

**Author:** ![phandc](https://avatars.discourse-cdn.com/v4/letter/p/ce73a5/32.png) [@phandc](https://forum.inductiveautomation.com/u/phandc)\
**Post date:** [October 9, 2021, 4:37pm UTC](https://forum.inductiveautomation.com/t/making-nested-grid-for-displaying-components-in-flex-repeater/51782/3 "2021-10-09T16:37:13Z")

</div>

Yeah, I want to make a nested grid like the firgure below.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e6a234447f4f95bebcc1fb49de07598196ee1a44.png)  
As you can see in the firgue, I have the same 6 components. Therefore I use Flex Repeater to create each component dynamically using Python script. But we can only display it following one row/column direction. That means we will have a 6x1 or 1x6 grid. I want to display 6 components in a 2x3 matrix for example.  
In web design, if you know about the CSS grid, we can specify the number of components on each row based on its size. Each row has 12 columns, so the maximum number of components on a row is 12.

---

<div class="post-metadata">

**Author:** ![mcgheeiv](https://avatars.discourse-cdn.com/v4/letter/m/71c47a/32.png) [@mcgheeiv](https://forum.inductiveautomation.com/u/mcgheeiv)\
**Post date:** [October 9, 2021, 6:08pm UTC](https://forum.inductiveautomation.com/t/making-nested-grid-for-displaying-components-in-flex-repeater/51782/4 "2021-10-09T18:08:23Z")

</div>

Sounds like you want to use the column container with a flex repeater setting the wrap property in the flex repeater to wrap.

---

<div class="post-metadata">

**Author:** ![vani161998](https://avatars.discourse-cdn.com/v4/letter/v/ee7513/32.png) [@vani161998](https://forum.inductiveautomation.com/u/vani161998)\
**Post date:** [March 10, 2022, 2:59am UTC](https://forum.inductiveautomation.com/t/making-nested-grid-for-displaying-components-in-flex-repeater/51782/5 "2022-03-10T02:59:03Z")

</div>

hi  
I have a similar requirement. If you have found the solution can you please share.  
thanks in advance.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [March 10, 2022, 9:59am UTC](https://forum.inductiveautomation.com/t/making-nested-grid-for-displaying-components-in-flex-repeater/51782/6 "2022-03-10T09:59:50Z")

</div>

Set the `wrap` property of your flex repeater to `wrap`:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/e/2eb681081feea5c0cd32395c61d8804d2fc555d9.png)
