Grid im Custom Button Card

Allgemein
, ,
1

Hallo,
irgendwie stehe ich gerade neben mir und finde die (wahrscheinlich einfache) Lösung nicht. Ich habe eine Custom:Button-Card erstellt und möchte in dieser das Wetter, die Außentemperatur und die Luftfeuchtigkeit untereinander angezeigt bekommen. Dazu bediene ich mich des Grids und dieser Code ist dabei herausgekommen:

type: custom:button-card
entity: weather.forecast_home
color: grey
show_state: true
show_name: false
styles:
  card:
    - padding: 10px 0px 15px 10px
  state:
    - font-size: 1em
    - font-weight: bold
    - width: 70%
  grid:
    - grid-template-areas: '"i" "t" "h"'
    - grid-template-columns: .5fr
  custom_fields:
    t:
      - width: 70%
      - margin: auto
    h:
      - width: 70%
      - margin: auto
custom_fields:
  t:
    card:
      type: custom:button-card
      entity: sensor.aussen_temperatur
      show_name: false
      show_state: true
      styles:
        icon:
          - color: grey
        state:
          - font-weight: bold
        card:
          - border: solid 3px grey
          - margin: 0px 0px 5px 0px
  h:
    card:
      type: custom:button-card
      entity: sensor.aussen_luft
      show_name: false
      show_state: true
      styles:
        icon:
          - color: grey
        state:
          - font-weight: bold
        card:
          - border: solid 3px grey
          - margin: 0px 0px 5px 0px

So weit, so gut. Aussehen tut das Ganze dann so:
image

Ich verstehe beim besten Willen nicht warum der State-Wert (Bewölkt) ganz rechts und ganz unten steht. Ich möchte den State gerne unter der Wolke haben und dann die restlichen Informationen.

2

Ok, mittlerweile bin ich durch intensives lesen der Docu (jaja RTFM) selber auf die Lösung gekommen. Der “Trick” besteht eigentlich in den vordefinierten vier Bezeichnungen vom Grid. Man(n) muss dann nur die richtige Bezeichnung auswählen und schon klappt es.

image