How to make a grid of round sub buttons?

[staxza]

Goal

I am doing a row of round sub buttons but cant get them evenly distributed
How do I do it like in your sample pic?

Source Yaml

type: custom:bubble-card
card_type: sub-buttons
sub_button:
  main: []
  bottom:
    - name: Controls
      buttons_layout: inline
      group:
        - entity: binary_sensor.gate_control_input
          icon: mdi:gate
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: call-service
            service: switch.toggle
            target:
              entity_id: switch.gate_control
        - entity: switch.mserver_plug
          icon: mdi:server
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: toggle
        - entity: switch.mserver_plug
          icon: mdi:server
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: toggle
        - entity: switch.mserver_plug
          icon: mdi:server
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: toggle
        - entity: switch.mserver_plug
          icon: mdi:server
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: toggle
        - entity: switch.mserver_plug
          icon: mdi:server
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: toggle
modules:
  - badgy-condition-helper
badgy-condition-helper:
  entity_badges:
    "1":
      entity: sensor.REPLACE_ME
      color: red
      show_unit: false
styles: |-
  styles: |
    .bubble-sub-button-container {
      display: flex !important;
      justify-content: space-evenly !important;
      align-items: center !important;
      width: 100% !important;
      padding: 0 8px !important;
      gap: 0 !important;
    }
    .bubble-sub-button-1,
    .bubble-sub-button-2,
    .bubble-sub-button-3,
    .bubble-sub-button-4,
    .bubble-sub-button-5,
    .bubble-sub-button-6 {
      border-radius: 50% !important;
      flex: 1 1 0 !important;
      max-width: calc(16.6% - 8px) !important;
      aspect-ratio: 1/1 !important;
      height: auto !important;
      min-width: 0 !important;
    }
    .bubble-sub-button-1 {
      background-color: rgba(30, 144, 255, 0.4) !important;
    }
    .bubble-sub-button-1[data-state="on"] {
      background-color: rgba(220, 38, 38, 0.9) !important;
    }
    .bubble-sub-button-2,
    .bubble-sub-button-3,
    .bubble-sub-button-4,
    .bubble-sub-button-5,
    .bubble-sub-button-6 {
      background-color: rgba(30, 144, 255, 0.4) !important;
    }
    .bubble-sub-button-2[data-state="on"],
    .bubble-sub-button-3[data-state="on"],
    .bubble-sub-button-4[data-state="on"],
    .bubble-sub-button-5[data-state="on"],
    .bubble-sub-button-6[data-state="on"] {
      background-color: rgba(255, 193, 7, 0.7) !important;
    }
rows: 1.438
card_layout: large-sub-buttons-grid

Which step did you already try?

No response

Problem

No response

Read the documentation

• I have read the documentation

[Mthomeassistant]

You have double a styles: syntax

I managed it like this:

type: custom:bubble-card
card_type: sub-buttons
sub_button:
  main: []
  bottom:
    - name: Controls
      buttons_layout: inline
      group:
        - entity: switch.tree
          icon: ""
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: toggle
          state_background: true
          scrolling_effect: false
          fill_width: false
        - entity: switch.hoover_plug
          icon: ""
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: toggle
          fill_width: false
        - icon: ""
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: toggle
          entity: switch.wiser_office_switch
          fill_width: false
      justify_content: space-evenly
    - name: Controls
      buttons_layout: inline
      group:
        - entity: switch.momentary_kettle_trigger
          icon: ""
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: none
          fill_width: false
          hold_action:
            action: toggle
          double_tap_action:
            action: toggle
        - icon: ""
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: toggle
          entity: input_boolean.kettle_alarm_switch
          fill_width: false
        - entity: fan.fan_plug
          icon: ""
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: none
          fill_width: false
          double_tap_action:
            action: toggle
          hold_action:
            action: toggle
      justify_content: space-around
    - name: Controls
      buttons_layout: inline
      group:
        - entity: switch.wiser_away_mode
          icon: ""
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: toggle
          fill_width: false
        - icon: ""
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: toggle
          fill_width: false
          entity: input_button.red_ring_off
        - icon: mdi:chevron-right
          show_name: false
          show_state: false
          show_background: true
          tap_action:
            action: navigate
            navigation_path: "#switch"
          fill_width: false
      justify_content: space-around
  bottom_layout: rows
styles: |-
  ha-card {
      --bubble-main-background-color: rgba(81,125,156,0.5) !important;
    }
  .bubble-sub-button {
      height: 54px !important;
      width: 54px !important;
    }
card_layout: large-sub-buttons-grid
grid_options:
  columns: 6
  rows: 3