# Grid layout out of order - forcing new row?

**URL:** <https://discourse.nodered.org/t/grid-layout-out-of-order-forcing-new-row/46662>\
**Category:** Dashboard\
**Created:** [3 June 2021 18:10 UTC](https://discourse.nodered.org/t/grid-layout-out-of-order-forcing-new-row/46662 "2021-06-03T18:10:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![colin-young](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin-young/32/42146_2.png) [@colin-young](https://discourse.nodered.org/u/colin-young)\
**Post date:** [3 June 2021 18:10 UTC](https://discourse.nodered.org/t/grid-layout-out-of-order-forcing-new-row/46662/1 "2021-06-03T18:10:41Z")

</div>

I have a dashboard set up like (order verified by exporting nodes):

- ui\_text, 3x1, order: 1
- ui\_text, 3x1, order: 2
- ui\_text, 3x1, order: 3
- switch, 6x1, order: 4
- ui\_text, 3x1, order: 5
- ui\_text, 3x1, order: 6

I expect to see:

```auto
| 1 | 2 |
---------
| 3 |
---------
| 4 |
---------
| 5 | 6 |

```

Instead I'm getting:

```auto
| 1 | 2 |
---------
| 3 | 5 |
---------
| 4 |
---------
| 6 |

```

My assumption was that the dashboard was built with the CSS grid layout pattern, but, after digging into the generated code, it appears the more modern flexbox is being used. I have not been able to figure out a way to force a row break there, either in the generated code or through the dashboard UI.

Other than making my last item 6x1, is there any way to force a new row? Resizing the item is not an ideal solution since there is no visual indication of the size and it requires an awkward amount of editing if I insert or remove items before where I want the break.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [3 June 2021 18:40 UTC](https://discourse.nodered.org/t/grid-layout-out-of-order-forcing-new-row/46662/2 "2021-06-03T18:40:30Z")

</div>

In the dashboard layout have you tried inserting a spacer after item 3

---

<div class="post-metadata">

**Author:** ![colin-young](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin-young/32/42146_2.png) [@colin-young](https://discourse.nodered.org/u/colin-young)\
**Post date:** [3 June 2021 18:45 UTC](https://discourse.nodered.org/t/grid-layout-out-of-order-forcing-new-row/46662/3 "2021-06-03T18:45:52Z")

</div>

~~That's kind of what I was expecting to find, but I don't have anything called "spacer" or anything else that sounds remotely related in the available nodes.~~

Nevermind. It's in the layout panel. But it doesn't force a new row. It behaves just as the 6x1 switch row does. The flexbox layout algorithm still floats the following elements up to fill out the row.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [3 June 2021 19:09 UTC](https://discourse.nodered.org/t/grid-layout-out-of-order-forcing-new-row/46662/4 "2021-06-03T19:09:44Z")

</div>

It works testing on my machine . You can set the size of the spacer.

 ![Screenshot_20210603-200800](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/86e2a09080e553b9812bdf69046463ddb43679e2.png)  
 ![Screenshot_20210603-200901](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/6/96f6d674d30224875adbec873e6c1cac01038f82.png)

---

<div class="post-metadata">

**Author:** ![colin-young](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin-young/32/42146_2.png) [@colin-young](https://discourse.nodered.org/u/colin-young)\
**Post date:** [3 June 2021 19:57 UTC](https://discourse.nodered.org/t/grid-layout-out-of-order-forcing-new-row/46662/5 "2021-06-03T19:57:25Z")

</div>

Well, yes, but that's just adding a dummy item that will need to be removed if I add or re-arrange the items but better than editing the size.

I'm looking for a way to say "don't put anything else in this row." Flexbox does have mechanisms that support that and it would be nice to have those available here. So far I haven't been able to get anything working with the styles being used though.

I'm going to keep playing with the HTML/CSS to see if I can figure out a better solution.

---

<div class="post-metadata">

**Author:** ![colin-young](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin-young/32/42146_2.png) [@colin-young](https://discourse.nodered.org/u/colin-young)\
**Post date:** [3 June 2021 20:23 UTC](https://discourse.nodered.org/t/grid-layout-out-of-order-forcing-new-row/46662/6 "2021-06-03T20:23:19Z")

</div>

It seems as though the best solution for the moment is to create a new group, turn off the name display and put the next group of controls in there. Less than ideal (there is a visible divider between them), but works for now.

Update: there are other issues. On wide displays the second group now appear beside the first one, instead of underneath.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [3 July 2021 20:23 UTC](https://discourse.nodered.org/t/grid-layout-out-of-order-forcing-new-row/46662/7 "2021-07-03T20:23:30Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.