Création d'un bouton personnalisé

Bonjour,

Ce matin, je vous soumets une nouvelle incompréhension de lovelace

Je cherche à fabriquer une tuile qui afficherai grosso-modo:
Name statut

Actuellement, j’obtiens
name
statut

J’ai tenté de comprendre la documentation ici

j’ai donc tenté de m’y mettre mais je ne dois pas avoir compris le concept. Si quelqu’un peu m’expliquer, j’aimerai faire de jolie tuile comme dans la doc.

Voici ce que j’ai testé

type: custom:button-card
show_name: true
entity: sensor.sun_next_rising
name: Levé du soleil
show_icon: false
tap_action:
  action: none
show_state: true
hold_action:
  action: none
styles:
  grid:
    - grid-template-areas: '"n" "s"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: auto
    - column-gap: 50px; "Ecart entre 2 colonnes

  statut:
    - align-self: start
    - justify-self: end
    - font-size: 10px
  name:
    - font-size: 24px

state: 
  - name: '[[[return entity.state]]]'

ce qui me donne
image

j’aimerai comprendre comment positionner le statut sur la même ligne et à droite du nom. Il y a forcément un truc que j’ai pas bien fait/compris.

Merci à vous

C’est les guillemets qui ne sont pas correctement positionnés

- grid-template-areas: '"n s"'

Salut super merci

buter sur si peu quelle loose.
Par hasard, j’ai vu dans différent tuto cette valeur 1fr sans que je ne trouve à quoi ça correspond. Tu le sais?

Non, je pense qu’il s’agit d’une fraction de la taille de la carte : par exemple, avec une seule colonne dans la carte, celle-ci prendra 100% de la largeur de la carte (éventuellement moins le padding à gauche et à droite. Avec deux colonnes, chacune d’elles prendront 50% de la largeur de la carte (moins le padding et l’espace entre les colonnes). Avec 3 colonnes, 33% etc. Mais je ne peux rien affirmer.
Après, il y a d’autres valeurs possibles :

  • « min-content » qui ajuste la taille de la colonne ou de la ligne au minimum en fonction du contenu de la colonne ou ligne.
  • « x% » en pourcentage de la largeur ou de la hauteur de la carte.
  • « 0.xFR » (0.5FR = 1/2 de la largeur de 1FR)…

Merci pour ces explications il me reste donc à faire ma mise en page.

Bonne soirée