Need help overriding 'gap' property separating stack-in-cards

Configuration Frontend
1

Hey everyone. I’m new to HA and I’ve been stuck on this issue for a minute, but I’m trying to override the gap property that is being added to my sections in dashboards. I’m using ‘stack-in-cards’ to order these together, and from what I have read in their repo this isn’t where the gap is coming from. I am also using card_mod to do css styling in my cards.

This image shows the gaps that are automatically added between cards in a section that I am trying to remove.

Screenshot 2026-01-10 143054
Screenshot 2026-01-10 1430542245×768 121 KB

I’ve tried using card_mod to add styles directly to the card like shown below. I’ve tried attaching to ‘ha-card’, as well as ‘#root’ since that is the ID where these styles are coming from.

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      gap: 0 !important;
      vertical-stack-card-gap: 0 !important;
      horizontal-stack-card-gap: 0 !important;
    }
cards:
  - type: custom:mushroom-light-card
    entity: light.living_room_main_lights
    name: Family Room
 ...

I’ve also tried applying these to a theme and using that theme to the dashboard this is in. (screen shot was taken before adding ‘row-gap: 0’ and ‘column-gap: 0’)


# Loads default set of integrations. Do not remove.
default_config:

# Load frontend themes from the themes folder
frontend:
  themes:
    my_theme:
      vertical-stack-card-gap: 0.1px
      horizontal-stack-card-gap: 0.1px
      stack-card-gap: 0.1px
      gap: 0px
      row-gap: 0px
      column-gap: 0px
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml

And through all of the ways to try and do this, I keep getting the same result where the vars aren’t found to set this gap (vertical-stack-card-gap, horizontal-stack-card-gap, stack-card-gap, row-gap, column-gap, gap), so then the ‘gap’ is defaulted to 8px.

I’m not sure where else to do. The closes thread to my question was this one which is what gave me the idea to try and use themes. I have been restarting my HA server (the quick load for reloading configurations) and been refreshing my page and clearing my browser’s cache between changes. I just can’t figure out how to override rules that are set on this root element. My end goal may not be for the ‘gap’ to be 0, but I’d like to figure out how to modify the properties here so I can control my layout more.

Thanks!

2

Here these need to be --vertical-stack-card-gap and --horizontal-stack-card-gap. Only when used in a theme do you omit -- as Home Assistant will put these in for you.

Easy to check in Browser tools (like your screenshot) that the variables e.g. --vertical-stack-card-gap are defined. If not then the theme is not applied correctly.

1 Like
3

Wow, I can’t believe I missed that. I could’ve swore I tried --vertical-stack-card-gap: 0 !important; as some point and it didn’t stick… I feel a bit dense now, but thank you for pointing that out @dcapslock.

I don’t know why my ‘theme’ isn’t sticking, but I wasn’t planning on using it right now so I won’t worry about it too much. I have it applied to the dashboard I’m working in, who knows…

Regardless, thanks for pointing out my mistake!

1 Like
4

Interestingly, my theme is being applied to another section in the same dashboard (I can tell because the gap is being applied to it as it is set in my theme and I have no styling on the element to do so).

The only difference I can see at first glance is that the card that is honoring the theme is using the native cards, not mushroom cards. I’ll try and remember to update this if I figure more out.

5

Figured out what I was missing. The theme doesn’t seem to get brought into the card/section edit windows. So my theme was being applied to the sections actually in the dashboard, but when I was viewing the preview while editing them the theme wasn’t being applied.

1 Like
6

fwiw, you can do the same with core vertical-stack card, and that is always the better option.

1 Like