Masonry Layout doesn't make sense

I wonder if anyone can help me… I’m really struggling to see how the layout adapts in a dashboard - it doesn’t seem to make sense

If I’m at 4 columns, this is what i see:

However, the first column there is actually waaaay down the page in 1 column view on mobile (which is where I want it), where the first 2 items in column 2 come first, then the first item in column 3 then first in column 4

Also, is there any way to drag things around here or is it simply the up and down (which also seems to send things to random places…)

In short, what’s the logic which governs the ordering here and why is my column one being populated by stuff I don’t want to see at the top?

It is not random but hard to explain.

I installed layout-card because it has some extra layout, like grid, horizontal, vertical as explained on the github of the author

You’ll find there nice exemples of how layouts work.

1 Like

Thanks - will take a look again. I did look at this, but I didn’t see anything that allows you to change (or see) how the columns work, only to set more or less columns

Horizontal is more like the way you’d expect your cards to spread in the columns. Or, grid (kind of hard to configure) or vertical, that brings a mobile look to the desktop view.

You can also look at this video

It is not specific to layouts but it is a part of the rebranding of his home assistant dashboard, he is reviewing the layout-card within it.

Thank you

It’s definitely better and I’ve managed to make something that works with Horizontal and max cols, but I’ve realised that because I have a conditional card that is right at the top (for good reason) but only appears in very rare circumstances it completely messes things up.

I still feel like to ordering logic is bonkers - how the top item in mobile view becomes the middle item in desktop view in any circumstance defies logic - if it’s #1 it should be top left in any view

Should be, depending of the height of the bricks of the masonry wall :smiley:
It is also a problem for me because layout is sometimes computed before the full height of the card is reached (like a graph card in a vertical-stack. At start, the graph card is very shallow but grow as soon as data are received and displayed but it is too late for the layout to change and it is crap.

1 Like

Can someone tell me why you would want a view like this? You can “sort of” change the view by changing the order, but not really as there is some weird logic in the background, what is the point? Why not just let me select how I want the view sorted based on the columns and the order? If I want a card in position 1 in column 1 and then another card in column 1 below the first, why would I not be able to? I understand that the layout will change based on screen resolution, etc but let this be my choice. I would think most users have a limited number of devices showing the dashboard and would like to be able to customize to these devices…

You can still do it with a custom:layout-card.

You are probably right, any pointers to how to do that? I´m not a dev, just a user, but you have not answered my initial question, why not let me decide how the default view is sorted? :slight_smile:

As usual: go to the card’s repo, learn docs, install the card, write a code.
Most of HA things need some coding skills…

You should create a feature request here.

Thanks Ildar, will have a look, but its a bit strange that this is not an obvious thing, have a hard time seeing that I would be the first one to ask…most dashboards have customization options and none of them work like this…I´m not a dev, but worked with IT since 1996, so have seem a few interfaces in my life…

Different people have different minds…

As a simple example:
this custom card allows to layout cards in his way:
– one card - 1st column
– three cards - 2nd column
– two cards - 3rd column

title: xxx
path: xxx
type: custom:vertical-layout
cards:

  - type: some card
    ....

  - type: custom:layout-break

  - type: some card
    ....

  - type: some card
    ....

  - type: some card
    ....

  - type: custom:layout-break

  - type: some card
    ....

  - type: some card
    ....
1 Like