📝 100% Templatable Lovelace Configurations

Yes, this is a very convenient thing - but now we cannot use a "variable_x" to define a "variable_y" unfortunately - like we could use a "vars[x]" to define a "vars[y]" (Variables: use VARIABLE_1 to define VARIABLE_2 · Issue #47 · iantrich/config-template-card · GitHub). Sometimes it is needed…
For example, with using the old notation the code could be something like this:

variables:
  - '''sonoff5_1'''                           #0
  - '''sonoff5_2'''                           #1
  - '''sonoff5_3'''                           #2

  - '''_mqtt_connect_count'''                 #3
  - '''_wifi_connect_count'''                 #4
  - '''_rssi'''                               #5

  - 'states["sensor." + vars[0] + vars[3]]'   #6
  - 'states["sensor." + vars[0] + vars[4]]'   #7
  - 'states["sensor." + vars[0] + vars[5]]'   #8

  - 'states["sensor." + vars[1] + vars[3]]'   #9
  - 'states["sensor." + vars[1] + vars[4]]'   #10
  - 'states["sensor." + vars[1] + vars[5]]'   #11

  - 'states["sensor." + vars[2] + vars[3]]'   #12
  - 'states["sensor." + vars[2] + vars[4]]'   #13
  - 'states["sensor." + vars[2] + vars[5]]'   #14

entities:
  - '${vars[6].entity_id}'
  - '${vars[7].entity_id}'
  - '${vars[8].entity_id}'

  - '${vars[9].entity_id}'
  - '${vars[10].entity_id}'
  - '${vars[11].entity_id}'

  - '${vars[12].entity_id}'
  - '${vars[13].entity_id}'
  - '${vars[14].entity_id}'

But anyway that is a lot of repeating code.
So it could be better to use a decluttering card:

  decl_XXXXXXXXXXXXXX:
    card:
      type: 'custom:config-template-card'
      variables:
        - .............. [[SENSOR_XXXXXXXXXX]]
        - .............. [[SENSOR_YYYYYYYYYY]]
        - .............. [[SENSOR_ZZZZZZZZZZ]]
      entities:
        - '[[SENSOR_XXXXXXXXXX]]'
        - '[[SENSOR_YYYYYYYYYY]]'
        - '[[SENSOR_ZZZZZZZZZZ]]'
      row:
        type: 'custom:multiple-entity-row'
        entity: '[[SENSOR_XXXXXXXXXX]]'
        entities:
          - entity: '[[SENSOR_YYYYYYYYYY]]'
            ....
          - entity: '[[SENSOR_ZZZZZZZZZZ]]'
            ....
        name: .....
        unit: .....
        icon: .....
        toggle: false
        show_state: .....
        state_header: ''
        secondary_info: last-changed

How to use:

entities:
  - type: 'custom:decluttering-card'
    template: decl_XXXXXXXXXXXXXX
    variables:
      - SENSOR_XXXXXXXXXX: ..............
      - SENSOR_YYYYYYYYYY: ..............
      - SENSOR_ZZZZZZZZZZ: ..............
  - type: 'custom:decluttering-card'
    template: decl_XXXXXXXXXXXXXX
    variables:
      - SENSOR_XXXXXXXXXX: ..............
      - SENSOR_YYYYYYYYYY: ..............
      - SENSOR_ZZZZZZZZZZ: ..............
  - type: 'custom:decluttering-card'
    template: decl_XXXXXXXXXXXXXX
    variables:
      - SENSOR_XXXXXXXXXX: ..............
      - SENSOR_YYYYYYYYYY: ..............
      - SENSOR_ZZZZZZZZZZ: ..............
  - type: 'custom:decluttering-card'
    template: decl_XXXXXXXXXXXXXX
    variables:
      - SENSOR_XXXXXXXXXX: ..............
      - SENSOR_YYYYYYYYYY: ..............
      - SENSOR_ZZZZZZZZZZ: ..............

Regarding multiple-entity-row - you may use kind of “styles: width: 150px” to prevent these misalignment:
image

Regarding using spaces:

'Coffee' + '\xa0'.repeat(16)

This will look nice only in case of using a font with fixed width; for proportional fonts it will cause a misalignment:
image
You may display these “Fair, Excellent etc” words in the "secondary-info" like it is described here (and even colourize it by card-mod like it is described here):
image

type: 'custom:config-template-card'
entities:
  - sun.sun
card:
  type: entities
  entities:
    - type: 'custom:multiple-entity-row'
      entity: sun.sun
      entities:
        - entity: sun.sun
          name: xxx
          styles:
            width: 60px
        - entity: sun.sun
          name: xxx
          styles:
            width: 60px
      unit: ''
      icon: ''
      toggle: false
      show_state: false
      state_header: ''
      state_color: false
      secondary_info: '${states[''sun.sun''].state === "above_horizon" ? "Rise and shine" : "Sleep well"}'

Actually, I thought that you were already using this card - your first pic looks like multiple-entity-row…