Dynamic Vertical Spacing in Dashboards

I do not see where this has been discussed and I apologize if it has already been asked but a couple things that have been driving me nuts are the following and please see screenshots.

Within a section, if I have a longer button, I cannot fill the extra space with more buttons. See the right side of my entertainment section could house more buttons.

Then, between the sections, I would like to be able to close up that blank spacing vertically between sections.


Place these buttons( i.e 4) inside a vertical stack, inside the right section

Native Cards are build to extend vertically to it’s content( as you see with your “remote-control”, therefore in the right section start with a vertical-stack-card, and add i.e 4 buttons, in the vertical-stack

type: vertical-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    entity: switch.toilet_floorheat
  - show_name: true
    show_icon: true
    type: button
    entity: switch.toilet_floorheat
  - show_name: true
    show_icon: true
    type: button
    entity: switch.toilet_floorheat
  - show_name: true
    show_icon: true
    type: button
    entity: switch.toilet_floorheat
1 Like

Perfect! Thank you. Now, if I can only get the sections to stop with all that vertical space between.

It’s most likely doo to your View-Type
Sections - Home Assistant .

Dense section placement

No, that did not seem to work. It removed some space between rows, but did not allow me to rearrange the cards to fill up empty space on other columns.

Yeah, Sections-View is Not a True Grid-View, it has “limitations” in the UI
Best thing you could do is using Masonry-View, thou then you cant either fully control which Card ends u where

So Now that you are aware of The Section-View’s " Behavior ", and the use of i.e Vertical / Horizontal / Grid-Cards , you can figuring out how you get the best result cording to your preferences.
Another Option is to use Custom:Layout-Cards(Views), And Choose " Grid-Layout-View " With this ( and the knowledge ) you can basically create the perfect View

NOTE: Default Section-View is a Grid-View ( Columns & Rows )
Each Row Adapts it’s Height To the Highest Card/Section !, So i believe you have “Issues” with the Height of your 1Row-3rd Column …
In Other Words, Split that up ! ( or it has to “span” 2 rows ), And Place the “rest” in i.e 2nd-Row<>3rd Column

I Assume you understand how a “Basic” grid-view like Section-View looks like

Read above and below
A Home-Approved Dashboard chapter 1: Drag-and-drop, Sections view, and a new grid system design! - Home Assistant .

1 Like

That looks pretty good. Clearly I am a noob about dashboards so trying to wrap my head around that.

1 Like

I Can’t count the Hours i’ve spend on My Dashboards, and how many ways/ideas i’ve had :laughing: , redoing , then New ideas again , then new “Options” turns up, re-modelling , all over again.
It’s feels like it’s becoming more a lifestyle, than a “Project” or Hobby :roll_eyes:

1 Like

The thing is I see some of these cool cards and ways people are doing things and it is, “I want that…”.

Yes, there are tons of ways to structure ones Dashboards and Cards, so you just have to keep trying, reading and asking , best way to learn.
You also have to make decisions, based upon which View-Type you want/need for each Dashboards.

Many people also uses Custom:Cards , and i.e Custom:Card-Mod or UiX And Custom-Themes to create stunning Dashboard