Layout Card for dummies

Configuration Frontend
1

Hi,
I’m trying to do a simple layout card and I’m unable to have custom card always filling the full screen. The button sizes chnages if I resize the browser.

Here is the yaml

views:

  • type: panel
    path: ‘’
    cards:
    • type: custom:layout-card
      cards:
      • type: button
        entity: switch.portao_garagem_switch_0
        name: Open Garage
        icon: mdi:garage
        view_layout:
        grid-area: c1
      • type: button
        entity: switch.portao_garagem_switch_0
        name: Open Garage (Bottom)
        icon: mdi:garage
        view_layout:
        grid-area: c2
        layout_type: custom:grid-layout
        layout:
        grid-template-columns: 1fr
        grid-template-rows: 1fr
        grid-template-areas: |
        “c1”
        “c2”

What I’m doing wrong

Screenshot 2025-01-02 at 14.27.24
Screenshot 2025-01-02 at 14.27.242186×1732 200 KB

Screenshot 2025-01-02 at 14.27.15
Screenshot 2025-01-02 at 14.27.153014×1804 189 KB

2

Please post code as preformatted text (</> in the cogwheel menu).

3

Besides, this could be a better place for asking similar questions:

Less clutter, info in 1 place, more chances to get an answer.

4 
views:
  - type: panel
    path: ''
    cards:
      - type: custom:layout-card
        cards:
          - type: button
            entity: switch.portao_garagem_switch_0
            name: Open Garage
            icon: mdi:garage
            view_layout:
              grid-area: c1
          - type: button
            entity: switch.portao_garagem_switch_0
            name: Open Garage (Bottom)
            icon: mdi:garage
            view_layout:
              grid-area: c2
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 1fr
          grid-template-rows: 1fr
          grid-template-areas: |
            "c1"
            "c2"