Setting custom widths for horizontal stacks?

Configuration Frontend
1

Hi all, n00b here! I’ve searched on here and Reddit and couldn’t find anything that spoke directly to my query, which is:
Is there a way that I can set custom percentage widths for different elements in a horizontal stack?

64861
648611280×2856 202 KB

I have a horizontal stack with a power flow card on 1 and then three gauge cards in a vertical stack on 2. Right now 1 and 2 50-50 width, but I’d love to be able to make 1 take 150% width and 2 down to 50% width, so that 1 takes up three quarters of the horizontal stack and 2 takes up one quarter, to match the “Garden Load” gauge card. Is that possible?

Here’s the yaml for that particular horizontal stack

type: horizontal-stack
cards:
  - type: custom:power-flow-card-plus
    entities:
      grid:
        entity: sensor.deye_sunsynk_sol_ark_grid_power
        secondary_info: {}
        display_state: two_way
        invert_state: false
        color_value: true
      battery:
        entity: sensor.deye_sunsynk_sol_ark_battery_power
        state_of_charge: sensor.deye_sunsynk_sol_ark_battery_state_of_charge
        show_state_of_charge: true
        state_of_charge_unit: "%"
        invert_state: true
      solar:
        entity: sensor.deye_sunsynk_sol_ark_pv_power
        display_zero_state: true
        secondary_info:
          unit_of_measurement: kWh
          decimals: 2
        name: PV
        use_metadata: false
      home:
        secondary_info: {}
        entity: sensor.deye_sunsynk_sol_ark_load_power
        name: Home
        override_state: true
      individual: []
    clickable_entities: true
    display_zero_lines: true
    use_new_flow_rate_model: true
    w_decimals: 0
    kw_decimals: 2
    min_flow_rate: 0.75
    max_flow_rate: 5
    max_expected_power: 8000
    min_expected_power: 0.01
    watt_threshold: 1000
    transparency_zero_lines: 0
    sort_individual_devices: false
  - type: vertical-stack
    cards:
      - type: gauge
        entity: sensor.deye_sunsynk_sol_ark_pv_power
        name: PV
        max: 4500
      - type: gauge
        entity: sensor.deye_sunsynk_sol_ark_battery_state_of_charge
        name: SOC
      - type: gauge
        entity: sensor.deye_sunsynk_sol_ark_load_power
        max: 8000
        name: Load

Many thanks,
David

2

Stacks use flex display so you can set flex CSS property on each card in the stack with card-mod to adjust flex sizing basis.

e.g.

type: horizontal-stack
cards:
  - type: tile
    entity: sun.sun
    card_mod:
      style: |
        :host {
          flex: 2 !important;
        }
  - type: tile
    entity: sun.sun