Lovelace cards in grid

As dashboard I previously went the Tileboard route which was great, but it does limit my flexibility to display custom cards which are available through Lovelace.

I am now looking to create a dashboard fully in Lovelace, but then in an ordered grid fashion like in the pictures below. This is probably achieved through a combination of horizontal and vertical stacks, but I am a bit lost where to start.

Is anyone kind enough to provide a bit of guidance on this?

images(2)

images

1 Like

You are correct that you are using a combination of horizontal and vertical stacks to achieve the look. You can also use the custom layout-card by @thomasloven to have more control over the layout. The best way to learn to is start small and practice.

I have a Github of my Lovelace UI which can give you an idea of how to start. I’m biased but I think looking at my config will be one of the easier ways to understand how it works. Unfortunately you can’t copy and paste my config, since it is using an old version of Home Assistant and custom cards.

1 Like

Very useful to have a look at your config. Thanks! I do still have a question on moving from 1 column to the next; how do you ensure the height matches the previous column? Is that really something that can only be done through the custom layout card or can I perform a clever trick with vertical/horizontal stack?

You could also have a look at Isabellas config (your example image) https://isabellaalstrom.github.io/lovelace/