Im trying to split my lovelace file but I dont get it.
I have a problem. I think its much more difficult to edit this yaml files than using RAW editor in Lovelace.
I have a code in the raw editor that works just fine, but just copy and paste dont work!
For example, Im trying to make a 3x3 columns and rows. But it dont work now in yaml mode, look at my code below:
File: 00-menu.yaml (in /ui-lovelace/)
title: Menu
panel: false
badges: []
id: menu
# MENU
cards:
- cards:
- entity: switch.lyxlage
icon: 'mdi:lightbulb-on-outline'
show_name: false
style: |
ha-card {
border: solid 1px var(--primary-color);
background: rgb(47,126,253,0.0);
box-shadow: none;
margin: 0%;
}
styles:
card:
- height: 100px
- width: 100px
tap_action:
action: navigate
navigation_path: /lovelace/1
type: 'custom:button-card'
- entity: switch.lyxlage
icon: 'mdi:security'
show_name: false
style: |
ha-card {
border: solid 1px var(--primary-color);
background: rgb(47,126,253,0.0);
box-shadow: none;
margin: 0%;
}
styles:
card:
- height: 100px
- width: 100px
tap_action:
action: navigate
navigation_path: /lovelace/2
type: 'custom:button-card'
- entity: switch.lyxlage
icon: 'mdi:weather-partly-cloudy'
show_name: false
style: |
ha-card {
border: solid 1px var(--primary-color);
background: rgb(47,126,253,0.0);
box-shadow: none;
margin: 0%;
}
styles:
card:
- height: 100px
- width: 100px
tap_action:
action: navigate
navigation_path: /lovelace/3
type: 'custom:button-card'
type: horizontal-stack
- cards:
- entity: switch.lyxlage
icon: 'mdi:lightbulb-on-outline'
show_name: false
style: |
ha-card {
border: solid 1px var(--primary-color);
background: rgb(47,126,253,0.0);
box-shadow: none;
margin: 0%;
}
styles:
card:
- height: 100px
- width: 100px
tap_action:
action: navigate
navigation_path: /lovelace/1
type: 'custom:button-card'
- entity: switch.lyxlage
icon: 'mdi:lightbulb-on-outline'
show_name: false
style: |
ha-card {
border: solid 1px var(--primary-color);
background: rgb(47,126,253,0.0);
box-shadow: none;
margin: 0%;
}
styles:
card:
- height: 100px
- width: 100px
tap_action:
action: navigate
navigation_path: /lovelace/1
type: 'custom:button-card'
- entity: switch.lyxlage
icon: 'mdi:lightbulb-on-outline'
show_name: false
style: |
ha-card {
border: solid 1px var(--primary-color);
background: rgb(47,126,253,0.0);
box-shadow: none;
margin: 0%;
}
styles:
card:
- height: 100px
- width: 100px
tap_action:
action: navigate
navigation_path: /lovelace/1
type: 'custom:button-card'
type: horizontal-stack
- cards:
- entity: switch.lyxlage
icon: 'mdi:lightbulb-on-outline'
show_name: false
style: |
ha-card {
border: solid 1px var(--primary-color);
background: rgb(47,126,253,0.0);
box-shadow: none;
margin: 0%;
}
styles:
card:
- height: 100px
- width: 100px
tap_action:
action: navigate
navigation_path: /lovelace/1
type: 'custom:button-card'
type: vertical-stack
type: vertical-stack
This is what I get:
Why is my last button on the right, and not below the others!? I have tried 100 different settings and its impossible.
Also, when using “panel: true” I get this, where are my other buttons!?? 
: ??
And my ui-lovelace.yaml looks like this:
background: center / cover no-repeat url("/local/images/bg/bg2.jpg")
cch:
swipe: true
swipe_animate: swipe
voice: hide
resources:
- resources: null
- type: module
url: /local/mini-media-player-bundle.js?v=1.4.2
- type: module
url: /community_plugin/mini-graph-card/mini-graph-card-bundle.js
- type: js
url: /local/monster-card.js?v=2
- type: module
url: /community_plugin/button-card/button-card.js
- type: module
url: /community_plugin/decluttering-card/decluttering-card.js
- type: module
url: /community_plugin/lovelace-card-mod/card-mod.js
- type: module
url: >-
https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js
- type: module
url: /community_plugin/atomic_calendar/atomic_calendar.js
- type: js
url: /community_plugin/lovelace-grocy-chores-card/grocy-chores-card.js
- type: module
url: /community_plugin/bignumber-card/bignumber-card.js
- type: js
url: /community_plugin/vertical-stack-in-card/vertical-stack-in-card.js
- type: js
url: /community_plugin/lovelace-home-feed-card/lovelace-home-feed-card.js
- type: js
url: /customcards/github/thomasloven/card-tools.js?track=true
- type: js
url: /customcards/github/thomasloven/layout-card.js?track=true
- type: module
url: /community_plugin/compact-custom-header/compact-custom-header.js
- type: module
url: /community_plugin/garbage-collection-card/garbage-collection-card.js
- type: module
url: /local/timer-card.js
- type: module
url: /community_plugin/banner-card/banner-card.js
- type: js
url: /community_plugin/lovelace-home-feed-card/lovelace-home-feed-card.js
- type: js
url: /local/list-card.js?v=0
title: Home
views:
- !include /config/ui-lovelace/00-menu.yaml
- !include /config/ui-lovelace/01-home.yaml
- !include /config/ui-lovelace/02-lights.yaml
Please someone help me!!