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

11 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.

2 Likes

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

1 Like