Grid layout question

stain3565 · November 12, 2024, 1:41pm

I have created a screen with buttons for my smart meross power strips.

Screenshot_1

The code for this is below:

  - type: horizontal-stack
    cards:
      - type: custom:mod-card
        style: |
          ha-card {
            border: 4px solid white;
            background: white;
            opacity: 90%;
            box-shadow: none;
          }
        card:
          type: custom:vertical-stack-in-card
          cards:
            - type: horizontal-stack
              cards:
                - type: vertical-stack
                  cards:
                    - type: custom:button-card
                      template: title
                      name: Living Room Left 1
                      variables:
                        background_color: black
                        color: dark-grey
                      icon: mdi:power-plug
                    - type: horizontal-stack
                      cards:
                        - type: custom:button-card
                          color_type: blank-card
                        - type: custom:decluttering-card
                          template: meross_button_template
                          variables:
                            - name: Power
                            - icon: power-standby
                            - entity: >-
                                switch.smart_switch_2209056530394554060148e1e9a51b13_outlet
                        - type: custom:button-card
                          color_type: blank-card
                    - type: horizontal-stack
                      cards:
                        - type: custom:decluttering-card
                          template: meross_button_template
                          variables:
                            - name: 1
                            - icon: numeric-1-box
                            - entity: >-
                                switch.smart_switch_2209056530394554060148e1e9a51b13_outlet_1
                        - type: custom:button-card
                          color_type: blank-card
                        - type: custom:decluttering-card
                          template: meross_button_template
                          variables:
                            - name: 2
                            - icon: numeric-2-box
                            - entity: >-
                                switch.smart_switch_2209056530394554060148e1e9a51b13_outlet_2
                    - type: horizontal-stack
                      cards:
                        - type: custom:decluttering-card
                          template: meross_button_template
                          variables:
                            - name: 3
                            - icon: numeric-3-box
                            - entity: >-
                                switch.smart_switch_2209056530394554060148e1e9a51b13_outlet_3
                        - type: custom:button-card
                          color_type: blank-card
                        - type: custom:decluttering-card
                          template: meross_button_template
                          variables:
                            - name: Glow
                            - icon: numeric-4-box
                            - entity: >-
                                switch.smart_switch_2209056530394554060148e1e9a51b13_outlet_4
                    - type: horizontal-stack
                      cards:
                        - type: custom:decluttering-card
                          template: meross_button_template
                          variables:
                            - name: 5
                            - icon: numeric-5-box
                            - entity: >-
                                switch.smart_switch_2209056530394554060148e1e9a51b13_outlet_5
                        - type: custom:button-card
                          color_type: blank-card
                        - type: custom:decluttering-card
                          template: meross_button_template
                          variables:
                            - name: 6
                            - icon: numeric-6-box
                            - entity: >-
                                switch.smart_switch_2209056530394554060148e1e9a51b13_outlet_6
                    - type: horizontal-stack
                      cards:
                        - type: custom:button-card
                          color_type: blank-card
                        - type: custom:decluttering-card
                          template: meross_button_template
                          variables:
                            - name: USB
                            - icon: usb-port
                            - entity: >-
                                switch.smart_switch_2209056530394554060148e1e9a51b13_outlet_7
                        - type: custom:button-card
                          color_type: blank-card

This looks fine but was not what I really wanted to do. As I use horizontal and vertical cards, I have had to have these blank cards in the grid yo make this look ok. However, I really would like to get rid of these to save webpage space and the grid layout currently plus what I would like is below:

I would still want the same style including the white border around the horizontal stack.

All of this may not be possible as I don’t know if it is possible to define a grid with what are basically half width empty button cards. Help would be appreciated.

mirekmal · November 12, 2024, 3:42pm

Sure, you can make it. Here is sample code:

  - type: custom:layout-card
    layout_type: grid
    layout_options:
      grid-template-columns: 150px 150px 170px
      grid-template-rows: 30px 80px 30px 30px 30px 30px
      grid-template-areas: |
        "title title title title"
        "empty1 button1 button1 empty2"
        "button2 button2 button3 button3"
        "button4 button4 button5 button5"
        "button6 button6 button7 button7"
        "empty3 button1 button1 empty4"
    cards:
      - type: custom:button-card
        view_layout:
          grid-area: title
        template: title
        name: Living Room Left 1
....
      - type: custom:button-card
        view_layout:
          grid-area: button1
        template: title
        name: Power
....

stain3565 · November 13, 2024, 12:13am

Thanks for the info. I am sure this is the right method but it is behaving not quite as I expected. Apologies for the grid area name changes (I was hoping this would work first time so named them to something more permanent - I never learn!) but the layout is the same:

title: Power Strips
path: power-strips
#theme: myhouse-mode
type: sidebar
cards:
  - !include /config/www/lovelace/tablet-dashboard/reusable_code/lovelace_tablet_sidebar.yaml
  - type: horizontal-stack
    cards:
      - type: custom:mod-card
        style: |
          ha-card {
            border: 4px solid white;
            background: white;
            opacity: 90%;
            box-shadow: none;
        card:
          type: custom:vertical-stack-in-card
          cards:
            - type: custom:layout-card
              layout_type: grid
              layout_options:
                grid-gap: 1px 1px
                grid-template-columns: 33% 33% 33%
                grid-template-rows: auto auto auto auto auto auto
                grid-template-areas: |
                  "title title title title"
                  "empty1 power power empty2"
                  "button1 button1 button2 button2"
                  "button3 button3 button4 button4"
                  "button5 button5 button6 button6"
                  "empty3 usb usb empty4"
              cards:
                  - type: custom:button-card
                    color_type: blank-card
                    view_layout:
                      grid-area: empty1
                  - type: custom:button-card
                    color_type: blank-card
                    view_layout:
                      grid-area: empty2
                  - type: custom:button-card
                    color_type: blank-card
                    view_layout:
                      grid-area: empty3
                  - type: custom:button-card
                    color_type: blank-card
                    view_layout:
                      grid-area: empty4
                  - type: custom:button-card
                    template: title
                    view_layout:
                      grid-area: title
                    name: Living Room Left 1
                    variables:
                      background_color: black
                      color: dark-grey
                    icon: mdi:power-plug
                  - type: custom:decluttering-card
                    template: meross_button_template
                    view_layout:
                      grid-area: power
                    variables:
                      - name: Power
                      - icon: power-standby
                      - entity: >-
                          switch.smart_switch_2210206757066754060348e1e9ac483a_outlet
                  - type: custom:decluttering-card
                    template: meross_button_template
                    view_layout:
                      grid-area: button1
                    variables:
                      - name: EAP110
                      - icon: numeric-1-box
                      - entity: >-
                          switch.smart_switch_2210206757066754060348e1e9ac483a_outlet_1
                  - type: custom:decluttering-card
                    template: meross_button_template
                    view_layout:
                      grid-area: button2
                    variables:
                      - name: Ext Plugs
                      - icon: numeric-2-box
                      - entity: >-
                          switch.smart_switch_2210206757066754060348e1e9ac483a_outlet_2
                  - type: custom:decluttering-card
                    template: meross_button_template
                    view_layout:
                      grid-area: button3
                    variables:
                      - name: Diivoo
                      - icon: numeric-3-box
                      - entity: >-
                          switch.smart_switch_2210206757066754060348e1e9ac483a_outlet_3
                  - type: custom:decluttering-card
                    template: meross_button_template
                    view_layout:
                      grid-area: button4
                    variables:
                      - name: Int Strip
                      - icon: numeric-4-box
                      - entity: >-
                          switch.smart_switch_2210206757066754060348e1e9ac483a_outlet_4
                  - type: custom:decluttering-card
                    template: meross_button_template
                    view_layout:
                      grid-area: button5
                    variables:
                      - name: 5
                      - icon: numeric-5-box
                      - entity: >-
                          switch.smart_switch_2210206757066754060348e1e9ac483a_outlet_5
                  - type: custom:decluttering-card
                    template: meross_button_template
                    view_layout:
                      grid-area: button6
                    variables:
                      - name: 6
                      - icon: numeric-6-box
                      - entity: >-
                          switch.smart_switch_2210206757066754060348e1e9ac483a_outlet_6
                  - type: custom:decluttering-card
                    template: meross_button_template
                    view_layout:
                      grid-area: usb
                    variables:
                      - name: Ext USB
                      - icon: usb-port
                      - entity: >-
                          switch.smart_switch_2210206757066754060348e1e9ac483a_outlet_7

I did at first assume I did not need blank cards in the “empty” areas but just added these when things were not working. I also tried percentages and auto sizes after it failed to work first time.

Anyhow, the result I am getting is:

The buttons are overlapping and size ratio for columns is off. The latter may be due to the fact that this is a sidebar view and maybe the 33% is being applied to a full screen width, not taking into account the area a sidebar takes up. I went back to the following settings:

                grid-template-columns: 150px 150px 150px
                grid-template-rows: 30px 30px 30px 30px 30px 30px

This resulted in:

I know it will be something obvious but grids and css are pretty much a new subject for me.

mirekmal · November 13, 2024, 8:10am

Ah… I was too fast (quickly copy-paste code I’m using and focused on grid definition)… missing 4th column definition in grid-template-columns and probably 30px is too small for your requirements in grid-template-columns, so I’d change this to:

....
            - type: custom:layout-card
              layout_type: grid
              layout_options:
                grid-gap: 1px 1px
                grid-template-columns: 25% 25% 25% 25%              # here added 4th columnt and reduced width to 25% so all columns fits into width of card
                grid-template-rows: auto auto auto auto auto auto   # or whatever fixed px value that makes good visual result
                grid-template-areas: |
                  "title title title title"
                  "empty1 power power empty2"
                  "button1 button1 button2 button2"
                  "button3 button3 button4 button4"
                  "button5 button5 button6 button6"
                  "empty3 usb usb empty4"
              cards:
....
Indeed, you do not need to add cards to empty grid cells, they will just not be filled in.
I also think you are overcomplicating things for start, putting layout card within horizontal and the vertical stack and moving it to sidebar... makes things more complex for troubleshooting. I'd start from putting this card in emty dashboard and make it woring. Once it look as desired I'd copy paste all code to your actual dashboard. Otherwise you risk some 'interference' from other settings... I went through this many times.

Nick4 · November 13, 2024, 8:16am

With the new sections view you can also change the size of cards by dragging.

stain3565 · November 21, 2024, 1:05am

I did start again, creating from scratch outside of my previous code and on an empty view and then rebuilt the rest of the page around these once they worked. It is indeed better to test the lowest level cards on their own rather than attempt to plug into existing layouts straightaway.

With some work, it looks a lot better.