Margins / Grid gap ignored in 2024.06.x

[Landshark77]

My Home Assistant version: 2024.06.1

Layout-card version (FROM BROWSER CONSOLE): 2.4.5

What I am doing: Using the grid layout to create several entity tiles with each tile containing a very small margin border.

What I expected to happen: Rendering of margins to be the same as in 2024.05.x.

What happened instead: large margin gaps appeared with no apparent way to reduce the width.

I can force the margin width by updating the following element from the inspection window, and changing the values to 1px 1px 1px:

root > * {

margin: var(--masonry-view-card-margin, 4px 4px 8px);

}

I also see in the inspection window when hovering over the element above: "--masonry-view-card-margin is not defined"

Here is a before after picture of what things looked like in 2024.05.x:

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
views:
  - title: Example
    panel: false
    type: custom:grid-layout
    layout:
      place-items: normal legacy
      height: 1fr
      min-height: 1fr
      card_margin: 0px
      margin: 0px
      padding: 0px
      grid-template-columns: repeat(3, 1fr)
      grid-gap: 0px
      grid-auto-rows: 120px
      grid-auto-columns: 120px
    background: black
    cards:
      - type: custom:button-card
        show_state: false
        show_label: true
        color_type: card
        styles:
          card:
            - border-radius: 0px
            - height: 100%
        view_layout:
          grid-column: 1
          grid-row: 1
        card_mod:
          style: |
            :host {
              height: 100% !important;
              width: 100% !important;
              max-width: 100% !important;
              position: unset !important;
              display: grid !important;
              }
      - type: custom:button-card
        show_state: false
        color_type: card
        styles:
          card:
            - border-radius: 0px
            - height: 100%
        view_layout:
          grid-column: 2
          grid-row: 1
        card_mod:
          style: |
            :host {
              height: 100% !important;
              width: 100% !important;
              max-width: 100% !important;
              position: unset !important;
              display: grid !important;
              }
# End of code

Error messages from the browser console: None

---

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.