Ajuda com layout do cartão layout-card

Dashboard
#1

Boa tarde a todos,

Eu sei que sou muito estúpido e peço desculpas antecipadamente, mas realmente não estou entendendo como criar meu painel como quero e gostaria de saber se poderia receber alguns conselhos.

tentando criar um painel para trabalho que estou tendo uma característica mas não estou conseguindo.

Segue a tela do que eu desejo

layout
layout666×802 47.4 KB

meu atual código é

rtype: custom:layout-card

layout_type: grid
layout:
grid-template-columns: 33% 63%
grid-template-rows: auto
grid-template-areas: |
“header header”
“main main2”
cards:

  • type: vertical-stack
    cards:
    • type: entities
      title: Tomada Sala
      entities:
      • entity: switch.tomada_sala_soquete_1
        name: Energia
        icon: mdi:lightning-bolt
        view_layout:
        grid-area: header
  • show_name: true
    show_icon: true
    type: button
    tap_action:
    action: toggle
    icon: mdi:television
    name: Tv Sala
    entity: switch.tomada_tv_soquete_1
    show_state: true
    view_layout:
    grid-area: main
  • type: custom:mini-graph-card
    entities:
    • sensor.tomada_sala_potencia
      name: Wats
      hours_to_show: 168
      points_per_hour: 0.25
      grid-area: main2
  • type: custom:layout-card
    layout_type: grid
    layout:
    grid-template-columns: 50% 50%
    grid-template-areas: |
    “card1 card2”
    cards:
    • type: entities
      entities:
      • entity: sensor.example1
        view_layout:
        grid-area: card1
    • type: entities
      entities:
      • entity: sensor.example2
        view_layout:
        grid-area: card2
  • type: custom:layout-card
    layout_type: grid
    layout:
    grid-template-columns: 30% 30% 30%
    grid-template-areas: |
    “card3 card4 card5”
    cards:
    • type: entities
      entities:
      • entity: sensor.example3
        view_layout:
        grid-area: card3
    • type: entities
      entities:
      • entity: sensor.example4
        view_layout:
        grid-area: card4
    • type: entities
      entities:
      • entity: sensor.example5
        view_layout:
        grid-area: card5

Até pedi para o CHAT GPT ajudar , mas a emenda fica pior que o soneto
Qualquer ajuda é muito bem vinda,

#2

Consegui.
Se alguém precisar de algo assim só me perguntar

#3

Eu estou precisando de um exemplo de como fazer para as próximas guias.
A guia principal Home eu consegui fazer, mas não funciona nas próximas