grid-template-areas en Home Assistant

Albert BarnosellEditor y responsable de Tecnoyfoto

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

Continúa leyendo

Siguiente guía relacionada · 6 min de lectura

Button Card Home Assistant: Guía para Mostrar Estados 2026

Actualizado el 04 de febrero de 2026 Continuamos profundizando en las posibilidades de la Button Card Home Assistant. En esta guía actualizada para 2026,…

Continuar con este artículo