Skip to content

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

grid-template-areas: ejemplo de diseño de cuadrícula de tarjeta de botón con llamadas.
Índice de contenido

    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

    Sígueme en Youtube - grid-template-areas
    Ajustes