Stacking cards in the UI

Configuration Frontend
1

I am going around in circles trying to figure this out. I want my cards to stack vertically and not with this awkward card off to the side. On one page it is working perfectly yet on the other its not and I cant see what the difference is in the code to make it so…

- title: Living Room
path: living-room
badges: []
cards:
  - type: custom:mushroom-template-card
	primary: Garage
	secondary: null
	icon: mdi:car
  - type: horizontal-stack
	cards:
	  - type: custom:mushroom-template-card
		primary: Home
		secondary: ''
		icon: mdi:home
		icon_color: blue
		layout: vertical
		tap_action:
		  action: navigate
		  navigation_path: house
	  - type: custom:mushroom-template-card
		primary: Lights
		secondary: ''
		icon: mdi:lightbulb
		icon_color: amber
		layout: vertical
		tap_action:
		  action: navigate
		  navigation_path: lights
  - type: custom:mushroom-template-card
	primary: Garage
	secondary: null
	icon: mdi:car
  - type: custom:mushroom-template-card
	primary: External
	secondary: null
	icon: mdi:tree-outline
  - type: custom:mushroom-light-card
	entity: light.office
	show_brightness_control: true
	collapsible_controls: true
- title: Office
path: office
cards:
  - type: custom:mushroom-chips-card
	chips:
	  - type: back
  - type: horizontal-stack
	cards:
	  - graph: line
		type: sensor
		detail: 1
		entity: sensor.hue_motion_sensor_1_temperature
		name: Temperature
	  - graph: line
		type: sensor
		detail: 1
		entity: sensor.hue_motion_sensor_1_battery
		name: Sensor Battery
  - type: custom:mushroom-light-card
	entity: light.office
	show_brightness_control: true
	collapsible_controls: true
    badges: []

good:

Screenshot 2023-06-07 193235
Screenshot 2023-06-07 193235817×551 15.1 KB

yuck baad:

Screenshot 2023-06-07 193216
Screenshot 2023-06-07 193216840×277 13 KB

5

To make them all look to be part of one card:

Or as separate cards:

6

Or even the grid card.

7

I tried Grid to have 2 cards side by side as 2 columns but I wanted the next card below to be full width instead of half width so it wasnt much use for me for that. Unless I’m missing something where I can have a card expand over 2 columns within a grid layout?

8

Yeah, I have been trying to use vertical stack with horizontal stack within to achieve this but am getting errors. Likely just need to code it properly. But can you explain how the top image functions vertically with the bottom one functioning horizontally when the code is as far as I can, doing the same thing

9

ok, I got it all worked out by using the the visual editor to stack horizontals within verticals without needing new addons. All good now. Thanks

Screenshot 2023-06-07 222605
Screenshot 2023-06-07 2226051039×889 45.6 KB

10

There is also this custom card which gives a lot of flexibility:

1 Like