Margins Still Showing Even Though Set to 0?

[efaden]

My Home Assistant version: 2024.2.0

Layout-card version (FROM BROWSER CONSOLE): 2.4.4

What I am doing:

      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 50vw 50vw
          grid-template-rows: min-content auto
          grid-template-areas: |
            "header-buttons header-buttons"
            "main-left main-right"
          height: calc(100vh - 60px)
          margin: 0px 0px 0px 0px !important
          card_margin: 0px 0px 0px 0px !important
          padding: 0px 0px 0px 0px !important
        cards:

What I expected to happen: Margins should be set to 0

What happened instead: I'm still seeing margins when looking through the dev tools.

I see

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

on the "layout-card" itself. Even though I also see the --layout-margin etc. If I manually zero the margins it's fine.

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.

[efaden]

Also, this is on a layout-card nested within a layout-card.

      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 50vw 50vw
          grid-template-rows: min-content auto
          grid-template-areas: |
            "header-buttons header-buttons"
            "main-left main-right"
          height: calc(100vh - 60px)
          margin: 0px 0px 0px 0px !important
          card_margin: 0px 0px 0px 0px !important
          padding: 0px 0px 0px 0px !important
        cards:
          - type: custom:layout-card
            layout_type: custom:grid-layout
            view_layout:
              grid-area: header-buttons
            layout:
              grid-template-columns: auto
              grid-template-rows: auto
              height: 100%
              place-content: end center
              margin: 0px 0px 0px 0px !important
              card_margin: 0px 0px 0px 0px !important
              padding: 0px 0px 0px 0px !important

Setting it on both seems to have no improvement.

[Nick2253]

See issue #137

The grid layout does not currently support the card_margin option. In order to work around that, you have to use a negative margin, i.e. margin: -4px.