Having trouble rendering a grid

[ChrisMancini]

I have a pretty basic design I would like to render on my dashboard using the button-card. Here is what I would like it to look like:

Here is my attempt at using the button-card:

type: custom:button-card
tap_action:
  action: none

custom_fields:
  title: Main Title
  subtitle: Subtitle goes here
  separator: ""
  datetime: Nov 4, 2025 – 12:48 PM

styles:
  card:
    - padding: 12px
    - display: grid
    - grid-template-columns: 1fr 2px auto
    - grid-template-rows: auto auto
    - grid-template-areas: |
        "title     separator datetime"
        "subtitle  separator datetime"
    - align-items: stretch
    - column-gap: 12px

  custom_fields:
    title:
      - grid-area: title
      - justify-self: start
      - align-self: end
      - font-size: 1.5rem
      - font-weight: bold

    subtitle:
      - grid-area: subtitle
      - justify-self: start
      - align-self: start
      - font-size: 1rem
      - color: "#555"

    separator:
      - grid-area: separator
      - align-self: stretch
      - width: 2px
      - background: "#ccc"

    datetime:
      - grid-area: datetime
      - justify-self: end
      - align-self: center
      - font-size: 0.95rem
      - color: "#333"

This renders to this:

Any suggestions?

[dcapslock]

Try surrounding your grid-template-areas: with single quotes. The edouble quotes are required in the value, and the whole value needs to be a single string.

[ChrisMancini]

I tried this:

- grid-template-areas: '"title separator datetime" "subtitle separator datetime"'

With no difference in results.

[dcapslock]

OK. Further inspection I see you are trying to redfine the grid. It's already in button-card. Your grid- styles go in grid not card. Remove all grid-area. Remove display: grid from card. Then all should work.

Bare yaml below without any extra styling for custom fields themselves.

type: custom:button-card
tap_action:
  action: none

custom_fields:
  title: Main Title
  subtitle: Subtitle goes here
  separator: ""
  datetime: Nov 4, 2025 – 12:48 PM

styles:
  grid:
    - grid-template-columns: 1fr 2px auto
    - grid-template-rows: auto auto
    - grid-template-areas: '"title separator datetime" "subtitle  separator datetime"'

[dcapslock]

Testing your custom-fields styles work. You like just need to add padding and/or margin to datetime

[dcapslock]

[ChrisMancini]

That was it! Thank you so much!! I should have asked days ago shortly after I started struggling with this.