Just don't get lovelace - how can I get these buttons to appear in a grid?

Configuration Frontend
1

I fundamentally don’t ‘get’ lovelace in the same way I’m perfectly at home with the regular YAML for writing automations. It’s never clicked. I find it seemingly incomprehensible. I’m trying to get the below to appear as a grid, I just can’t make it work. Any tips much appreciated!! Thank you…!

title: Street
views:
  - badges: []
    cards:
      - cards:
          - card:
              content: '# {{ states.input_text.keypad.state }}'
              type: markdown
            conditions:
              - entity: input_text.keypad
                state_not: ' '
            type: conditional
        type: horizontal-stack
      - cards:
          - hold_action:
              action: none
            icon: 'mdi:numeric-1'
            show_icon: true
            show_name: false
            show_state: false
            tap_action:
              action: call-service
              service: script.button_one_text
            type: button
          - hold_action:
              action: none
            icon: 'mdi:numeric-2'
            show_icon: true
            show_name: false
            show_state: false
            tap_action:
              action: call-service
              service: script.button_two_text
            type: button
          - hold_action:
              action: none
            icon: 'mdi:numeric-3'
            show_icon: true
            show_name: true
            show_state: false
            tap_action:
              action: call-service
              service: script.button_three_text
            type: button
        type: horizontal-stack
      - cards:
          - hold_action:
              action: none
            icon: 'mdi:numeric-4'
            show_icon: true
            show_name: true
            show_state: false
            tap_action:
              action: call-service
              service: script.button_four_text
            type: button
          - hold_action:
              action: none
            icon: 'mdi:numeric-5'
            show_icon: true
            show_name: true
            show_state: false
            tap_action:
              action: call-service
              service: script.button_five_text
            type: button
          - hold_action:
              action: none
            icon: 'mdi:numeric-6'
            show_icon: true
            show_name: false
            show_state: false
            tap_action:
              action: call-service
              service: script.button_six_text
            type: button
        type: horizontal-stack
      - cards:
          - hold_action:
              action: none
            icon: 'mdi:numeric-7'
            show_icon: true
            show_name: true
            show_state: false
            tap_action:
              action: call-service
              service: script.button_seven_text
            type: button
          - hold_action:
              action: none
            icon: 'mdi:numeric-8'
            show_icon: true
            show_name: false
            show_state: false
            tap_action:
              action: call-service
              service: script.button_eight_text
            type: button
          - hold_action:
              action: none
            icon: 'mdi:numeric-9'
            show_icon: true
            show_name: false
            show_state: false
            tap_action:
              action: call-service
              service: script.button_nine_text
            type: button
        type: horizontal-stack
      - cards:
          - hold_action:
              action: none
            icon: 'mdi:close'
            show_icon: true
            show_name: false
            show_state: false
            tap_action:
              action: call-service
              service: script.button_clear_text
            type: button
          - hold_action:
              action: none
            icon: 'mdi:numeric-0'
            show_icon: true
            show_name: false
            show_state: false
            tap_action:
              action: call-service
              service: script.button_zero_text
            type: button
          - hold_action:
              action: none
            icon: 'mdi:check'
            show_icon: true
            show_name: false
            show_state: false
            tap_action:
              action: call-service
              service: script.button_enter_text
            type: button
        type: horizontal-stack
    type: vertical-stack        
    icon: 'mdi:arrow-decision-outline'
    title: Gubbins
2

Use the UI times it the lovelace then select “show code editor” to see how yaml show look.

[3 dots] upper right.corner of ui>> Edit Dashbaord>>[plus sign] icon>>“grid”

Use grid card to make what you want

3

Thanks, but I’m not on 0.118 yet, still on 0.113.3. I daren’t update as my partner is away for a week so I’m alone with our three kids and I do not have hours and hours to debug all the breaking changes.

In addition, I know that I can achieve the grid without being on 0.118, I just can’t quite tweak the it! :rofl: I’ll keep fiddling and hopefully post the solution when I get there.

Cheers

4

Yes you can, but you should rather update to 0.118 and use the grid-card. Why reinvent the wheel? :slight_smile:
Personally I’d suggest updating first, there are breaking changes in the frontend from 0.113 to 0.118, so if you now finish and implement your frontend, it might as well be that it doesn’t work/look like before when you update.and waiting longer and longer before you update makes things worse and you’ll have even more breaking changes to work through, just my 2 cents.

5

Figured it out. Posting the answer that got the buttons to align in a ‘keypad’ grid in case it helps someone else.

    cards:
      - cards:
          - cards:
              - card:
                  content: '# {{ states.input_number.keypad.state | int }}'
                  type: markdown
                conditions:
                  - entity: input_number.keypad
                    state_not: '0.0'
                type: conditional
            type: horizontal-stack
          - cards:
              - hold_action:
                  action: none
                icon: 'mdi:numeric-1'
                show_icon: true
                show_name: false
                show_state: false
                tap_action:
                  action: call-service
                  service: script.button_one
                type: button
              - hold_action:
                  action: none
                icon: 'mdi:numeric-2'
                show_icon: true
                show_name: false
                show_state: false
                tap_action:
                  action: call-service
                  service: script.button_two
                type: button
              - hold_action:
                  action: none
                icon: 'mdi:numeric-3'
                show_icon: true
                show_name: true
                show_state: false
                tap_action:
                  action: call-service
                  service: script.button_three
                type: button
            type: horizontal-stack
          - cards:
              - hold_action:
                  action: none
                icon: 'mdi:numeric-4'
                show_icon: true
                show_name: true
                show_state: false
                tap_action:
                  action: call-service
                  service: script.button_four
                type: button
              - hold_action:
                  action: none
                icon: 'mdi:numeric-5'
                show_icon: true
                show_name: true
                show_state: false
                tap_action:
                  action: call-service
                  service: script.button_five
                type: button
              - hold_action:
                  action: none
                icon: 'mdi:numeric-6'
                show_icon: true
                show_name: false
                show_state: false
                tap_action:
                  action: call-service
                  service: script.button_six
                type: button
            type: horizontal-stack
          - cards:
              - hold_action:
                  action: none
                icon: 'mdi:numeric-7'
                show_icon: true
                show_name: true
                show_state: false
                tap_action:
                  action: call-service
                  service: script.button_seven
                type: button
              - hold_action:
                  action: none
                icon: 'mdi:numeric-8'
                show_icon: true
                show_name: false
                show_state: false
                tap_action:
                  action: call-service
                  service: script.button_eight
                type: button
              - hold_action:
                  action: none
                icon: 'mdi:numeric-9'
                show_icon: true
                show_name: false
                show_state: false
                tap_action:
                  action: call-service
                  service: script.button_nine
                type: button
            type: horizontal-stack
          - cards:
              - entity: switch.garage
                hold_action:
                  action: none
                icon: 'mdi:close'
                show_icon: true
                show_name: false
                show_state: false
                tap_action:
                  action: call-service
                  service: script.button_clear
                type: button
              - hold_action:
                  action: none
                icon: 'mdi:numeric-0'
                show_icon: true
                show_name: false
                show_state: false
                tap_action:
                  action: call-service
                  service: script.button_zero
                type: button
              - hold_action:
                  action: none
                icon: 'mdi:check'
                show_icon: true
                show_name: false
                show_state: false
                tap_action:
                  action: call-service
                  service: script.button_enter
                type: button
            type: horizontal-stack
        type: vertical-stack