# Dashboard 2 assimetric layout, is it possible?

**URL:** <https://discourse.nodered.org/t/dashboard-2-assimetric-layout-is-it-possible/92694>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [26 October 2024 14:10 UTC](https://discourse.nodered.org/t/dashboard-2-assimetric-layout-is-it-possible/92694 "2024-10-26T14:10:19Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![GIGS1975](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gigs1975/32/47306_2.png) [@GIGS1975](https://discourse.nodered.org/u/GIGS1975)\
**Post date:** [26 October 2024 14:10 UTC](https://discourse.nodered.org/t/dashboard-2-assimetric-layout-is-it-possible/92694/1 "2024-10-26T14:10:19Z")

</div>

Hi there..I am struggling all the day, to make my page look like i would like to have it. I have 4 columns. Each of width 3. Nicely fits the screen, But the first column is way higher then other, and i want to place the 5th coming group right beside group1 and beneath groups 2,3,4, but i cant get it work. Is it even possible in Dashboard 2?

In the picture you see, the group of "grouped actions" on the bottom would nicely fit beside lights group and under groups 2,3,4, but it never does so. Is there anything i can do? Any help would be apprecated,

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/c/ecaa987ea595a96b4ba5d2f806304f19ff237899.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [26 October 2024 14:35 UTC](https://discourse.nodered.org/t/dashboard-2-assimetric-layout-is-it-possible/92694/2 "2024-10-26T14:35:31Z")

</div>

I believe what you are after is a "masonry" layout.

According to the [documentation](https://dashboard.flowfuse.com/layouts/types/grid.html#controlling-empty-space)

> We do not have a smart masonry layout  
> The height of a given "row" of widgets is determined by the tallest widget in that row.

I think your best bet is to combine "Shutters", "Blinds", "Entrys" and "Grouped Actions" into a single wide group.

---

<div class="post-metadata">

**Author:** ![GIGS1975](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gigs1975/32/47306_2.png) [@GIGS1975](https://discourse.nodered.org/u/GIGS1975)\
**Post date:** [26 October 2024 14:41 UTC](https://discourse.nodered.org/t/dashboard-2-assimetric-layout-is-it-possible/92694/3 "2024-10-26T14:41:33Z")

</div>

thank you very much

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 October 2024 14:50 UTC](https://discourse.nodered.org/t/dashboard-2-assimetric-layout-is-it-possible/92694/4 "2024-10-26T14:50:21Z")

</div>

CSS support for masonry grid is still in experimental state. But it's coming sooner or later. I hope the dashboard will then take it as an option. Currently the best you can do is to not have different heights for cards in one row. And that is valid only if you target your build for single screen size.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [28 October 2024 09:37 UTC](https://discourse.nodered.org/t/dashboard-2-assimetric-layout-is-it-possible/92694/5 "2024-10-28T09:37:31Z")

</div>

Just to confirm @jbudd has nailed the answer here. masonry layouts are the solution, which we don't support at the moment.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [28 October 2024 20:05 UTC](https://discourse.nodered.org/t/dashboard-2-assimetric-layout-is-it-possible/92694/6 "2024-10-28T20:05:48Z")

</div>

Wouldn't help most of us even if it was supported

> Chrome and Edge don’t support this feature yet. In Safari Technology Preview, masonry layouts are enabled by default, so you can check them out without any extra steps. In Firefox, you’ll need to enable a flag (an experimental feature). Type about:config in the address bar, and set layout.css.grid-template-masonry-value.enabled to true

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [28 October 2024 20:41 UTC](https://discourse.nodered.org/t/dashboard-2-assimetric-layout-is-it-possible/92694/7 "2024-10-28T20:41:40Z")

</div>

> [@joepavitt](#):
>
> masonry layouts

It is possible to do using a JavaScript library of course.

> **[Masonry](https://masonry.desandro.com)**
>
> Cascading grid layout library

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [28 October 2024 20:47 UTC](https://discourse.nodered.org/t/dashboard-2-assimetric-layout-is-it-possible/92694/8 "2024-10-28T20:47:48Z")

</div>

With which the management will break the creativity into million beautiful shiny pieces on the floor.

---

<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:** [27 November 2024 20:48 UTC](https://discourse.nodered.org/t/dashboard-2-assimetric-layout-is-it-possible/92694/9 "2024-11-27T20:48:01Z")

</div>

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