Dashboard 2 assimetric layout, is it possible?

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,

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

According to the documentation

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.

1 Like

thank you very much

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.

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

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

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

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

1 Like