Card arrangement

Configuration Frontend
1

In the lovelace interface, I’m kind of confused how the cards are arranged. I’d imagine it is like matrix of row and columns. However different cards have different size. How does it arrange them? Or how do we control the layout?
Thanks.

2

Use vertical or horizontal stacks or the custom layout card.
Otherwise they will be arranged one card at a time left to right and top to bottom.

1 Like
3

Here’s how it works: https://github.com/thomasloven/lovelace-layout-card#auto-layout

2 Likes
4

Thanks! Bookmarked, will be learning from there.

5

As I was reading that, it occurred to me that what I’ve always wanted Lovelace to do would be an auto mode that prefers the shortest column always, or the further left column if two or more are of equal height. Is this the same as simply setting min_height to 0?

6

I… guess. Try it!

Edit: With layout-card, that is.
While the method applies to the default layout, the variables are only for layout-card. Just to be clear.

7

I must admit, I hadn’t tried the layout card in a long time because I couldn’t get it to work for me, and unfortunately, I find it still doesn’t lay things out the way I would expect. I suspect it’s because of my use of conditional cards, and that the height of the column isn’t being correctly calculated when the conditions are false and the cards are not shown.

I have cases where there are just conditional cards, and sometimes conditional cards within vertical-stack or custom:vertical-stack-in-card cards. I think this is throwing a huge wrench in the layout process.

Edit: I tested after removing some of my conditional cards, and I this does seem to be the case. While there is no change to the cards displayed in the view, the layout changes dramatically.

1 Like