card_margin broken on grid layout

[red4dj]

My Home Assistant version: 2024.7.1

Layout-card version (FROM BROWSER CONSOLE): 2.4.5

What I am doing:
Adding the card_margin property to a grid-layout

What I expected to happen:
Apply 0px margin to each card in grid layout.

What happened instead:
No custom margin was applied. The cards kept the default margin.

Minimal steps to reproduce:

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: entity
    entity: sensor.time
    view_layout:
      grid-area: main
  - type: entity
    entity: sensor.date
    view_layout:
      grid-area: sidebar
layout:
  grid-template-columns: 33% auto
  grid-template-areas: |
    "main sidebar"
  margin: 0px
  card_margin: 0px

Error messages from the browser console:
N/A

---

By putting an X in the boxes ([X]) below, I indicate that I:

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• Have made sure I am using the latest version of the plugin.
• Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[Landshark77]

Looks like a duplicate of #292

[nobodyspecial]

Can confirm. card_margin is not working

[Landshark77]

add:

masonry-view-card-margin: "0"

to your theme yaml

Also appears this add on is no longer being maintained.

[Triple-S]

The option card_margin is not broken on grid layout, it is intentionally not available for a grid layout. The documentation states that it only exists for the column based layouts Masonry, Horizontal and Vertical but not for Grid.

The way I solved this problem is putting the grid layout card into a card-mod card (https://github.com/thomasloven/lovelace-card-mod) which was created by the same author:

type: custom:mod-card
card_mod:
  style:
    layout-card $ grid-layout $: "#root { --masonry-view-card-margin: 0; }"
card:
  type: custom:layout-card
  layout_type: custom:grid-layout
  cards: []