# Fixed Column Layout in Flex Repeater Across All Viewports in Ignition Perspective **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [April 8, 2025, 9:14am UTC](https://forum.inductiveautomation.com/t/fixed-column-layout-in-flex-repeater-across-all-viewports-in-ignition-perspective/104817 "2025-04-08T09:14:16Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\ **Post date:** [April 8, 2025, 9:14am UTC](https://forum.inductiveautomation.com/t/fixed-column-layout-in-flex-repeater-across-all-viewports-in-ignition-perspective/104817/1 "2025-04-08T09:14:16Z")
1. I am using a Flex Repeater in Ignition Perspective. Inside it, I dynamically pass the instances and set the `mode` to `wrap`. I was able to adjust the horizontal (width) gap, but I'm having trouble adjusting the vertical (height) gap between instances. Also, I want the Flex Repeater to display only **4 instances per row (i.e., 4 columns)**. 2. When I switch to a different tab or view size (like tablet or mobile), the Flex Repeater automatically adjusts and shows only 3 or 2 instances per row. If anyone has suggestions, it would be very helpful! ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/8/083197d76bf9a796707464d957c9ab886ed79e6b.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/9/19898910637233441c4daf4e2d2920be0eab86bf.png) thanks & regards Arifrahuman.A ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [April 8, 2025, 9:31am UTC](https://forum.inductiveautomation.com/t/fixed-column-layout-in-flex-repeater-across-all-viewports-in-ignition-perspective/104817/2 "2025-04-08T09:31:33Z")
Try these settings. They should get you most of the way. ![Flex repeater four in a row](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/4/14155ab0aaaa805c5b9d60b6e147bcc019998084.png) I set `elementPosition.basis : 22%` to be a little less than 25% to allow for gaps and it seemed to work. I didn't play with the value after that. My repeating view root has `mode : percent` and the internal components' widths are given in percent. ---
**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\ **Post date:** [April 8, 2025, 9:46am UTC](https://forum.inductiveautomation.com/t/fixed-column-layout-in-flex-repeater-across-all-viewports-in-ignition-perspective/104817/3 "2025-04-08T09:46:31Z")
Yes, I adjusted the `basis` property, and it successfully shows **4 columns per row**. But on the **next row** , the layout doesn't display correctly — the components inside the instances are overlapping or not aligned properly. I also tried using a **template view** for the Flex Repeater, but the issue still occurs. We'll also adjust the height gap. mode: fixed ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/d/bd960aa7e00b54bb750782639e493ce2b52be0a1.png) mode:percentage ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/9/698c550b2c50f00c3d692d1046a6e3f330edd3d6.png) ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [April 8, 2025, 10:01am UTC](https://forum.inductiveautomation.com/t/fixed-column-layout-in-flex-repeater-across-all-viewports-in-ignition-perspective/104817/4 "2025-04-08T10:01:09Z")
Try, `elementPosition.grow : 0` Tip: don't use the LED Display component. It's outdated. A label will be much clearer and easier to read. ---
**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\ **Post date:** [April 9, 2025, 4:14am UTC](https://forum.inductiveautomation.com/t/fixed-column-layout-in-flex-repeater-across-all-viewports-in-ignition-perspective/104817/5 "2025-04-09T04:14:03Z")
Yes Its working. Thanks @Transistor ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [April 9, 2025, 1:49pm UTC](https://forum.inductiveautomation.com/t/fixed-column-layout-in-flex-repeater-across-all-viewports-in-ignition-perspective/104817/6 "2025-04-09T13:49:32Z")
> [@Transistor](#): > > elementPosition.basis : 22% ~~Err, what about `style.gap`? Using a fixed percentage will be awfully breaky~~ Nevermind, I jumped to conclusions before reading the "4 per row" part. I think you could use something like `basis: calc(25% - 3px)` though so the gap doesn't change size as the page gets bigger ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [April 9, 2025, 2:15pm UTC](https://forum.inductiveautomation.com/t/fixed-column-layout-in-flex-repeater-across-all-viewports-in-ignition-perspective/104817/7 "2025-04-09T14:15:59Z")
> [@nminchin](#): > > basis: calc(25% - 3px) Yes, that's better. I haven't got in the habit of doing CSS calculations. I must!