Card_mod behaves differently with grid layout

I use the card mod and layout card from Thomas Loven quite extensively. But I’ve come across strange issue I can’t manage to understand.

The intent is to have a simple mini graph card showing just graph, no other data:

type: custom:mini-graph-card
entities:
  - entity: sensor.living_room_average_temperature
    color: red
line_width: 0
height: 60
show:
  icon: false
  state: false
  name: false
  legend: false
  labels: false
card_mod:
  style: |
    ha-card {border-style: none; background: none; border-radius: 0;}
    :host {border-style: none; background: none; border-radius: 0;}

When rendered, I get what I want (picture below). Card mod is used to remove the white background (now is transparent) and to remove the border radius.

In my final design, I want to use this card as part of the button-card, which is inside the grid layout, which then new yaml looks like so:

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: repeat(auto-fill, min(260px))
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.living_room_average_temperature
        color: red
    line_width: 0
    height: 60
    show:
      icon: false
      state: false
      name: false
      legend: false
      labels: false
    card_mod:
      style: |
        ha-card {border-style: none; background: none; border-radius: 0;}
        :host {border-style: none; background: none; border-radius: 0;}

But when rendered, card_mod part is not accepted and I don’t get the desired result:

I can’t understand why the difference if widget is inside or not the grid layout?

1 post - 1 participant

Read full topic