# Flex Repeater - set the number of instances that it wraps at

**URL:** <https://forum.inductiveautomation.com/t/flex-repeater-set-the-number-of-instances-that-it-wraps-at/97675>\
**Category:** Ignition\
**Created:** [October 23, 2024, 3:28pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-set-the-number-of-instances-that-it-wraps-at/97675 "2024-10-23T15:28:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ted.garrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ted.garrison/32/11732_2.png) [@ted.garrison](https://forum.inductiveautomation.com/u/ted.garrison)\
**Post date:** [October 23, 2024, 3:28pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-set-the-number-of-instances-that-it-wraps-at/97675/1 "2024-10-23T15:28:08Z")

</div>

I love flex repeaters, but I'm looking for a way to force the wrap to happen every X number of instances, rather than based on view width. In this particular case, I'm building a dynamic "calendar", so I want to wrap at 7, regardless of the window size.

I can't find this anywhere, so I'm guessing it just isn't there. Or am I just missing it.

---

<div class="post-metadata">

**Author:** ![msteele](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/msteele/32/77889_2.png) [@msteele](https://forum.inductiveautomation.com/u/msteele)\
**Post date:** [October 23, 2024, 3:32pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-set-the-number-of-instances-that-it-wraps-at/97675/2 "2024-10-23T15:32:00Z")

</div>

My understanding of wrap is that it's just the CSS doing the work.  
Lets say your cards/embeds are 100px wide and you want them to wrap after 7, you can contain the flex repeater within another flexbox and set the width to something like 750px and grow=0 to essentially force a wrap by constraining the width of the flex repeater.

---

<div class="post-metadata">

**Author:** ![ted.garrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ted.garrison/32/11732_2.png) [@ted.garrison](https://forum.inductiveautomation.com/u/ted.garrison)\
**Post date:** [October 23, 2024, 3:35pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-set-the-number-of-instances-that-it-wraps-at/97675/3 "2024-10-23T15:35:44Z")

</div>

Yeah, that's basically what I'm doing now. But it requires everything to be forced to a size rather than taking full advantage of flex sizing. And if I tweak the size of something, I've gotta go and spread that tweak to the related parents.

The current stuff works for things where you don't care about the exact layout, but it'd be nice to be able to have the # method as well. Which I believe exists in the underlying CSS.

Assuming this is the underlying stuff, which it appears "auto-fill" is the current value being used. Seems like it just needs another parameter enabled to allow auto-fill to also be a number.

[repeat() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat)

---

<div class="post-metadata">

**Author:** ![vtran](https://avatars.discourse-cdn.com/v4/letter/v/779978/32.png) [@vtran](https://forum.inductiveautomation.com/u/vtran)\
**Post date:** [October 23, 2024, 3:36pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-set-the-number-of-instances-that-it-wraps-at/97675/4 "2024-10-23T15:36:17Z")

</div>

You can probably set the `elementPosition.basis` to `14%` (100/7). Might need to adjust for padding/margin though.

---

<div class="post-metadata">

**Author:** ![Michael\_White](https://avatars.discourse-cdn.com/v4/letter/m/c6cbf5/32.png) [@Michael\_White](https://forum.inductiveautomation.com/u/Michael_White)\
**Post date:** [October 23, 2024, 3:41pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-set-the-number-of-instances-that-it-wraps-at/97675/5 "2024-10-23T15:41:13Z")

</div>

You might be able to achieve this using css `grid-template-columns`

---

<div class="post-metadata">

**Author:** ![ted.garrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ted.garrison/32/11732_2.png) [@ted.garrison](https://forum.inductiveautomation.com/u/ted.garrison)\
**Post date:** [October 23, 2024, 3:44pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-set-the-number-of-instances-that-it-wraps-at/97675/6 "2024-10-23T15:44:16Z")

</div>

I'm assuming that is the underlying CSS flex repeaters use. I'd rather just have the flex repeater fully support the count property of it...
