Make a lovelace grid layout

Trying to create a nice grid layout is kind of a headache in lovelace right now. You have to nest horizontals in a vertical or verticals in a horizontal to get a tidy grid layout, and even then it’s not necessarily perfect. It’d be nice to have a proper “grid nxn” layout container.

In progress

14 Likes

Tell me more! :slight_smile: have been looking for that for ages (or at least 2,5 years…)

There are 2 PRs open to make implement this. We are building our own system and the plan is to allow for custom layout systems as well

10 Likes

I honestly hope the system in work will be somehow similar to what Twitter Bootstrap has implemented for years now. The Bootstrap grid is a very well established system that allows to decorate grid tiles in a robust way that gives full control over the behavior on all screen widths, from large desktop to small mobile in portrait mode.

Yes, please! I need this, when I add too many cards especially on desktop it just adjusts by itself and does a terrible job, like by creating a fourth column.

I would like to have something similar with Grafana GUI where you have sort of predefined grid but can easily drag-drop and resize all panels.

3 Likes

Hmmm… I guess they didn’t make it into the 0.115 release :frowning:

Is there any way that I can install your PR’s manually?

Well, they aren’t finished. Patience we’ll get there

Exciting! I also need this. I will patiently wait. Thanks!

I made a fork of the custom layout card that makes it easier to create a grid layout a while back: https://github.com/kdw2060/hassio-custom-cards/tree/master/layout-card-griddier

Could be useful until the built-in method becomes available.

[impatient mode] any news yet? [/Impatient mode]

Work is still being done. I would not expect a full release of this until 0.118 or 0.119.

Trying to find a balance of responsiveness and usability.

3 Likes

It is so much easier to create a grid layout with your changes. Thanks so much for the contribution :+1:

1 Like

Was the, just released, grid card what you were working on @zsarnett?

Looks like that grid card is from someone else (@balloob) :wink: Good addition, but that grid card still isn’t resolving the hassle to create a complete dashboard. Hopefully this development from @zsarnett will make things easier!

2 Likes

Are there any news on this?

Still no news?

Maybe this is what you are looking for:

I tried it out and it’s very promising and a great start. My problem with it is that it’s only UI and not yaml and does not work very good on my phone. I would like control on all my platforms (mobil, tabet, browser) and be able to choose how it thing should look like on all of them.

I created a bootstrap card to be able to do this until something better shows up.

Meanwhile Thomas Loven has released a new version of his layout-card that includes full grid support including responsive design, so my fork is no longer necessary.