I went back and reviewed your questions and I do see that I was missing something in my answers.
The horizontal space is something that the Home Assistant Lovelace internal programming seems to determine. For instance, if you take the browser window and resize it horizontally, you’ll notice that your containers resize as your do it and then, at some point, the number recalculates and all your containers shift around. It’s supposed to do that because of “responsive design” so that your dashboard will fit nicely on various screen sizes. The key thing here is that the horizontal space doesn’t seem to be under your control.
When I did the layout you’re seeing in this thread (the one a few back where you noted that I have various sizes of containers), I was using very aggressive control over the way my containers stacked.
I started with a horizontal stack 1 item wide, then the first three rows went this way:
1 container with 7 buttons, 1 horizontal stack with 2 items which were containers with 4 buttons and five buttons respectively, 1 horizontal stack with 3 items which were containers with 3 buttons, two buttons, and 3 buttons respectively, 1 horizontal stack with 2 items which were containers with 3 buttons and 4 buttons respectively and so on. Then I used the “aspect ratio” setting on the buttons within those containers to get the containers to be the same height relative to that first 7 button container. That involved a lot of plugging in numbers for aspect ratio and seeing if it looked right. This was a royal pain whenever I shifted things around and the number of buttons changed.
I finally decided that that was too much work. So I changed the design so that every single container was 4 buttons wide and eliminated the single item wide horizontal constraint entirely. That meant I could use one aspect ratio for every button. Here’s what the new layout looks like:
and if you resize the window:
Here’s the beginning of my ui-lovelace.yaml file which does all this:
decluttering_templates: !include lovelace-templates-decluttering.yaml
button_card_templates: !include lovelace-templates-button-card.yaml
title: Home
swipe_nav:
wrap: true
animate: swipe
views:
# Main
- title: Main
path: main
icon: 'mdi:home'
badges: []
cards:
- type: grid
columns: 3
square: false
cards:
- entity: sensor.family_sensor
name: Presence
template: presence-tile-compact
type: 'custom:button-card'
aspect_ratio: 3/2.87
variables:
m1_entity: person.russell_smith
m1_name: R
m2_entity: person.janette
m2_name: J
m3_entity: person.katie
m3_name: K
- entity: climate.thermostat
name: Thermostat
template: climate-tile-compact
type: 'custom:button-card'
aspect_ratio: 3/2.87
- type: 'custom:decluttering-card'
template: mode-thing
variables:
- aspect_ratio: 3/2.87
- card_background_color: darkSlateGrey
- thing_entity: input_boolean.in_bed
- thing_name: 'Modes'
- thing_icon_on: 'mdi:bed'
- thing_icon_color_on: yellow
- thing_name_on: 'in bed'
- thing_icon_off: 'mdi:walk'
- thing_icon_color_off: deepSkyBlue
- thing_name_off: 'about'
- thing_toggle: true
- m0_show: 'true'
- m0_entity: input_boolean.security_issue
- m0_on_state: 'on'
- m0_icon_on: 'hass:shield-lock'
- m0_icon_color_on: red
- m0_status_on: 'security'
- m0_icon_off: 'hass:shield-outline'
- m0_icon_color_off: deepSkyBlue
- m0_status_off: 'all secure'
- m0_toggle: true
- m1_show: 'true'
- m1_entity: sun.sun
- m1_on_state: 'above_horizon'
- m1_icon_on: 'mdi:weather-sunny'
- m1_icon_color_on: yellow
- m1_status_on: 'day'
- m1_icon_off: 'mdi:moon-waning-crescent'
- m1_icon_color_off: deepSkyBlue
- m1_status_off: 'night'
- m1_toggle: false
- m2_show: 'true'
- m2_entity: switch.presence_simulation
- m2_on_state: 'on'
- m2_icon_on: 'mdi:lightbulb-group'
- m2_icon_color_on: yellow
- m2_status_on: 'sim.lights on'
- m2_icon_off: 'mdi:lightbulb-group-outline'
- m2_icon_color_off: deepSkyBlue
- m2_status_off: 'sim.lights off'
- m2_toggle: true
- m3_show: 'true'
- m3_entity: binary_sensor.mailbox_contact
- m3_on_state: 'on'
- m3_icon_on: 'mdi:mailbox-open-up'
- m3_icon_color_on: yellow
- m3_status_on: 'check mail'
- m3_icon_off: 'mdi:mailbox-outline'
- m3_icon_color_off: deepSkyBlue
- m3_status_off: 'mail'
- m3_toggle: true
# Master Control
- type: 'custom:button-card'
template: container
color: Grey
name: Master Control
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: input_boolean.zoom_lighting
name: Zoom Lights
template: light-group-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
- template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
double_tap_action:
action: call-service
service: script.good_night_02
service_data:
lights_wait: '0'
in_bed_wait: '0'
tap_action:
action: call-service
service: script.good_night_02
service_data:
lights_wait: '10'
in_bed_wait: '15'
name: |
[[[
if (states["input_select.good_night_phase"].state == "ready") return "";
if (states["input_select.good_night_phase"].state == "bed") return "in bed...";
return "Good Night";
]]]
icon: |
[[[
if (states["input_select.good_night_phase"].state == "lights") return "mdi:lightbulb-group";
if (states["input_select.good_night_phase"].state == "bed") return "mdi:bed";
return "mdi:power";
]]]
- template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
tap_action:
action: call-service
service: script.dishes
name: |
[[[
return states["input_select.dishes_phase"].state;
]]]
icon: |
[[[
if (states["input_select.dishes_phase"].state == "wash") return "mdi:hand-wash";
if (states["input_select.dishes_phase"].state == "put away") return "mdi:stack-overflow";
return "mdi:silverware-clean";
]]]
- type: 'custom:decluttering-card'
template: auto-light-thing
variables:
- thing_entity: input_boolean.grow_light_automated
- thing_name: 'Grow Lt'
- light_entity: switch.grow_light_outlet
- thing_icon_on: 'mdi:lightbulb-auto'
- thing_icon_off: 'mdi:lightbulb-auto'
- aspect_ratio: 1/1.1
# Side
- type: 'custom:button-card'
template: container
color: LightBlue
name: Side
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: binary_sensor.side_door_sensor_contact
name: Outside Door
template: door-button-open
type: 'custom:button-card'
aspect_ratio: 1/1.1
- type: 'custom:decluttering-card'
template: locking-thing
variables:
- thing_entity: switch.outside_tap
- thing_name: 'Bib'
- lock_entity: input_boolean.outside_water_valve_lock
- thing_icon_on: 'mdi:water-pump'
- thing_icon_off: 'mdi:water-pump-off'
- aspect_ratio: 1/1.1
- entity: binary_sensor.upstairs_motion_sensor_motion
name: Stairs Motion
template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
styles:
name:
- font-size: 0.45em
- entity: camera.blueiris_n_side_cam
name: Camera
template: standard
type: 'custom:button-card'
color: SlateGrey
aspect_ratio: 1/1.1
# Front Porch
- type: 'custom:button-card'
template: container
color: Brown
name: Front Porch
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: binary_sensor.front_doorbell_motion
name: porch
template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
- entity: camera.blueiris_front_cam
name: Yard
template: standard
type: 'custom:button-card'
aspect_ratio: 1/1.1
color: SlateGrey
- entity: camera.front_doorbell
name: Doorbell
template: standard
type: 'custom:button-card'
aspect_ratio: 1/1.1
styles:
name:
- font-size: 0.45em
color: SlateGrey
- entity: switch.front_porch_light
name: Light
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
# Dining Room/Kitchen
- type: 'custom:button-card'
template: container
color: GoldenRod
name: Dining Room/Kitchen
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: light.dining_room_chandelier
name: DR Light
template: light-group-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
styles:
name:
- font-size: 0.45em
- entity: binary_sensor.dining_room_motion_motion
name: DR Motion
template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
styles:
name:
- font-size: 0.45em
- entity: switch.stove_sink_lights
name: K Light
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
styles:
name:
- font-size: 0.45em
- entity: binary_sensor.side_kitchen_door_contact
name: Side Door
template: door-button-open
type: 'custom:button-card'
aspect_ratio: 1/1.1
# Living Room
- type: 'custom:button-card'
template: container
color: Khaki
name: Living Room
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: binary_sensor.front_door_sensor_contact
name: Door
template: door-button-open
type: 'custom:button-card'
aspect_ratio: 1/1.1
- entity: camera.blueiris_living_room_cam
name: Camera
template: standard
type: 'custom:button-card'
color: SlateGrey
aspect_ratio: 1/1.1
- entity: binary_sensor.living_room_motion_motion
name: LR Motion
template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
styles:
name:
- font-size: 0.45em
tap_action:
action: navigate
navigation_path: /lovelace/sub_LRA
- entity: fan.lr_sonoff
name: Ceiling Fan
template: fan-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
styles:
name:
- font-size: 0.45em
hold_action:
action: more-info
# Living Room Lights
- type: 'custom:button-card'
template: container
color: Khaki
name: Living Room Lights
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: light.lr_sonoff
name: Ceiling Light
template: light-group-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
styles:
name:
- font-size: 0.45em
- entity: switch.r_desk_lamp
name: 'R:Desk Lamp'
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
styles:
name:
- font-size: 0.45em
- entity: switch.j_desk_lamp
name: 'J:Desk Lamp'
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
styles:
name:
- font-size: 0.45em
- name: All Lights
template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
icon: 'mdi:power'
tap_action:
action: navigate
navigation_path: /lovelace/sub_LRL
# Bathroom
- type: 'custom:button-card'
template: container
color: dimgrey
name: Bathroom
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: switch.bathroom_master_switch
name: Bath
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
styles:
name:
- font-size: 0.45em
- entity: binary_sensor.bathroom_door_contact
name: Door
template: door-button-closed
type: 'custom:button-card'
aspect_ratio: 1/1.1
- entity: binary_sensor.bathroom_multipurpose_sensor_motion
name: Motion
template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
styles:
name:
- font-size: 0.45em
tap_action:
action: navigate
navigation_path: /lovelace/sub_BRA
- type: grid
columns: 2
square: false
cards:
# R&J Bedroom
- type: 'custom:button-card'
template: container
color: skyBlue
name: R&J Bedroom
custom_fields:
buttons:
card:
type: grid
columns: 2
square: true
cards:
- entity: light.rj_sonoff
name: Ceiling Light
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
- entity: fan.rj_sonoff
name: Ceiling Fan
template: fan-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
# Kt Bedroom
- type: 'custom:button-card'
template: container
color: white
name: Kt Bedroom
custom_fields:
buttons:
card:
type: grid
columns: 2
square: true
cards:
- entity: light.k_sonoff
name: Ceiling Light
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
- entity: fan.k_sonoff
name: Ceiling Fan
template: fan-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
# Back Yard
- type: 'custom:button-card'
template: container
color: Green
name: Back Yard
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: binary_sensor.back_door_sensor_contact
name: Door
template: door-button-open
type: 'custom:button-card'
aspect_ratio: 1/1.1
- type: 'custom:decluttering-card'
template: motion-light-thing
variables:
- thing_entity: switch.back_door_motion_light
- thing_name: 'Deck Light'
- motion_entity: input_boolean.back_porch_motion
- thing_icon_on: 'mdi:lightbulb-on'
- thing_icon_off: 'mdi:lightbulb-outline'
- aspect_ratio: 1/1.1
- entity: camera.blueiris_back_yard_cam
name: Yard
template: standard
type: 'custom:button-card'
aspect_ratio: 1/1.1
color: SlateGrey
- entity: switch.garage_motion_light
name: "Garage Light"
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
# Garage
- type: 'custom:button-card'
template: container
color: MidnightBlue
name: Garage
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: cover.overhead_garage_door
name: Overhead
aspect_ratio: 1/1.1
template: garage-cover
type: 'custom:button-card'
- entity: camera.blueiris_garage_cam
name: Garage
template: standard
type: 'custom:button-card'
aspect_ratio: 1/1.1
styles:
name:
- font-size: 0.45em
color: SlateGrey
- entity: binary_sensor.garage_door_hinge_sensor_contact
name: Door
template: door-button-open
type: 'custom:button-card'
aspect_ratio: 1/1.1
- entity: camera.alley_camera
name: Alley
template: standard
type: 'custom:button-card'
aspect_ratio: 1/1.1
color: SlateGrey
You’ll note I’m using Decluttering templates as well as some specific button_card templates. Those are how I get a few specialized cards like those 3 massive information dump cards at the top and fun cards like my locking hose bib card and the motion controller light card. You’ll also see that I’m still using the aspect_ratio setting, but only to make the cards slightly taller so I can display the text and graphics well.
