Really struggling with css styling with card-mod

Configuration Frontend
1

Good evening

I have been playing with card-mod for a while but finding it really hard to achieve something simple. I have created a 3 column layout card and all i want is to have 0 margin between all 3 columns but it seems impossible to achieve. The main property seems to be --layout-margin: 4px 4px 0px 4px; which is picked up from the root element.

I cant work out how i target this property, be really grateful for any advice

Thank you

2

Can you post your code ? It will help expedite a solution.

Here is an example

image
image910×186 7.45 KB

type: custom:layout-card
layout_type: custom:grid-layout
layout:
      grid-template-columns: 1fr 1fr 1fr
      margin: 10px 0px 0px 0px
cards:
     - type: custom:mushroom-template-card
       icon: mdi:mushroom
       icon_color: red
     - type: custom:mushroom-template-card
       icon: mdi:mushroom 
       icon_color: yellow
       card_mod:
         style: |
           ha-card {
             left: -8px;
             }
     - type: custom:mushroom-template-card
       icon: mdi:mushroom
       icon_color: blue
       card_mod:
         style: |
           ha-card {
             left: -16px;
             }