Parameter "card_margin" ignored when using grid layout

[cdhgee]

My Home Assistant version: 2022..4.1

Layout-card version (FROM BROWSER CONSOLE): LAYOUT-CARD 2.4.2 IS INSTALLED

What I am doing: Trying to set card margins on nested grid-layouts

What I expected to happen: Margin on cards within the grid is controlled by the card_margin parameter

What happened instead: card_margin parameter is being ignored and all cards have a margin

Minimal steps to reproduce:

1. Add a card with the following YAML:

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 1fr
  margin: 0
  padding: 0
  card_margin: 0px
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
      margin: 0
      padding: 0
      card_margin: 0px
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: light.garage_work_light
      - type: button
        tap_action:
          action: toggle
        entity: light.garage_work_light

2. Observe that there is a gap between the cards. Per the code above the margin should be set to 0 on all sides.

This appears to be caused by the #root > * CSS which is getting injected

In other layouts which inherit from BaseColumnsLayout, the --card-margin CSS variable is set which defaults to the margin shown above, but can be overriden with the card_margin parameter. In the grid layout, this is statically set and cannot be overridden with card_margin.

        #root > * {
          margin: var(--masonry-view-card-margin, 4px 4px 8px);
        }

(grid.ts, lines 147-149)

Would it be possible to update the grid layout so that it uses the card_margin parameter if it is defined to correct this behavior?

In some instances it is possible to wrap the grid card in a card-mod card and set the margins that way, but this is not always possible - e.g., when using auto-entities.

---

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

• [X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• [X] Have made sure I am using the latest version of the plugin.
• [X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• [X] 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.

[rgogada]

having the same issue. looking forward to the merged version.

[aaamoeder]

still seeing this behavior ??? has a fix been merged ?

[EmJay276]

There is already a PR (https://github.com/thomasloven/lovelace-layout-card/pull/210) to fix this issue

[Sanch0ous]

Hi, PR still not reviewed ?

[Tahuwa]

Hi, any update regarding this PR?

[LaBoss]

Any news with this merge, or any workaround?

[Nerih]

just wanted to say that this issue still exists. Is it possible to review the PR/Merge?

for now, as a workaround, i have added masonry-view-card-margin:2px to my theme.yaml

i suspect you can change the 2px to what ever you like.

[luismalves]

Also still have the same bug @thomasloven. Could you please accept the PR request? Thanks!

[Nerih]

Also still have the same bug @thomasloven. Could you please accept the PR request? Thanks! Amazing, also - Did u try the work around? U can add masonary-view-card to your theme.yaml

[luismalves]

Yes but it will impact everywhere, some places it's needed the manual set of marging.