grid-template-areas en Home Assistant

Cuando hablamos de grid-template-areas, nos estamos refiriendo a la cuadrícula. Puede ser la cuadrícula de toda la página o en el caso que hemos visto en esta página, en la Button Card, la cuadrícula de una tarjeta de Home Assistant. Vamos a ver un poco más y a base de ejemplos cómo configurar esta cuadrícula.

Para obtener una descripción general rápida del atributo grid-template-areas, el siguiente ejemplo. Esto debería ayudarle a comenzar:

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

• (i) Imagen
• (n) nombre
• (s) estado
• (l) etiqueta

Si tomamos el valor y lo orientamos en filas y columnas, comienzas a ver el resultado final.

"i n s"
"i n s"
"i n l"

El producto final dará como resultado el siguiente diseño de cuadrícula

Algunos ejemplos grid-template-areas:

etiqueta en la parte superior:

styles:
  grid:
    - grid-template-areas: '"l" "i" "n" "s"'
    - grid-template-rows: min-content 1fr min-content min-content
    - grid-template-columns: 1fr

icono en el lado derecho (sobrecargando un diseño existente):

- type: 'custom:button-card'
  entity: sensor.sensor1
  layout: icon_state_name2nd
  show_state: true
  show_name: true
  show_label: true
  label: label
  styles:
    grid:
      - grid-template-areas: '"n i" "s i" "l i"'
      - grid-template-columns: 1fr 40%

Botones similares a Apple Homekit:

- type: custom:button-card
  entity: switch.skylight
  name: <3 Apple
  icon: mdi:fire
  show_state: true
  styles:
    card:
      - width: 100px
      - height: 100px
    grid:
      - grid-template-areas: '"i" "n" "s"'
      - grid-template-columns: 1fr
      - grid-template-rows: 1fr min-content min-content
    img_cell:
      - align-self: start
      - text-align: start
    name:
      - justify-self: start
      - padding-left: 10px
      - font-weight: bold
      - text-transform: lowercase
    state:
      - justify-self: start
      - padding-left: 10px
  state:
    - value: 'off'
      styles:
        card:
          - filter: opacity(50%)
        icon:
          - filter: grayscale(100%)

Sígueme a Youtube