Remove spacing between between custom:layout-cards/custom:mini-graph-card

Configuration Frontend
1

Hi, I’ve been working on sprucing up my dashboards and created a combo card using the custom:layout-card to put a mini-graph-card as the background and a minimalistic area card as the foreground for my different rooms. I would like to remove the spacing between these cards but I have been unsuccesful so far (I am not very well versed in CSS). From what I was able to tell by inspecting and looking a the css of the page the margin that seems to be an issue is from the mini-graph card but im unsure of how to adjust this, either through card_mod or otherwise.

Screenshot 2025-12-27 144958
Screenshot 2025-12-27 1449581920×594 90.9 KB

Code sample:

type: custom:vertical-stack-in-card
card_mod:
  style: |
    ha-card {
      background-color: rgba(25,0,0,0) !important;
      padding: 0px 0px 0px 0px !important;
      margin: 0px 0px 0px 0px !important;
    }
cards:
  - type: custom:bubble-card
    card_type: separator
    name: Rooms
    icon: mdi:home
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-areas: |
        "header header header"
        "header header header"
        "header header header"
      grid-template-rows: 33% 33% 33%
      margin: 0px
    cards:
      - type: custom:mini-graph-card
        card_mod:
          style: |
            ha-card {
              padding: 0 !important;
              height: 100%;
            }
        hours_to_show: 2
        points_per_hour: 10
        show:
          icon: false
          name: false
          state: false
        color_thresholds:
          - value: 19
            color: rgba(33,150,243,1)
          - value: 21
            color: rgba(128,239,0,1)
          - value: 24
            color: rgba(255,255,0,1)
          - value: 28
            color: rgba(255,0,0,1)
        entities:
          - sensor.living_room_temp_temperature
        view_layout:
          grid-area: header
      - type: custom:better-minimalistic-area-card
        title: Living Room
        hide_unavailable: true
        icon: mdi:sofa
        show_area_icon: true
        shadow: true
        card_mod:
          style: |
            ha-card {
              background-color: rgba(25,0,0,0) !important;
              font-weight: bold;
            }
        style:
          sensors_icon_size: 35px
          sensors_button_size: 45px
          shadow_color: black
          color: white
        tap_action:
          action: navigate
          navigation_path: /config/areas/area/living_room
        entities:
          - entity: sensor.living_room_temp_trend
            state_color: true
            state:
              - value: 28
                operator: ">="
                color: rgba(255,0,0,1)
              - value: 24
                operator: ">="
                color: rgba(255,255,0,1)
                background_color: null
              - value: 20
                operator: ">="
                color: rgba(128,239,0,1)
              - value: 0
                operator: ">"
                color: rgba(33,150,243,1)
          - entity: sensor.living_room_temp_humidity
            color: rgba(33,150,243,1)
          - entity: binary_sensor.motion_living_room
          - entity: sensor.heating_living_room
            icon: mdi:heat-wave
            state_color: true
            state:
              - value: "on"
                color: rgba(255, 193, 7)
          - entity: sensor.living_room_heater_energy_today
        view_layout:
          grid-area: header
          show: always
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-areas: |
        "header header header"
        "header header header"
        "header header header"
      grid-template-rows: 33% 33% 33%
      margin: 0px
    cards:
      - type: custom:mini-graph-card
        hours_to_show: 2
        points_per_hour: 10
        card_mod:
          style: |
            ha-card {
              padding: 0 !important;
              height: 100%;
            }
        show:
          icon: false
          name: false
          state: false
        color_thresholds:
          - value: 19
            color: rgba(33,150,243,1)
          - value: 21
            color: rgba(128,239,0,1)
          - value: 24
            color: rgba(255,255,0,1)
          - value: 28
            color: rgba(255,0,0,1)
        entities:
          - sensor.server_room_temp
        view_layout:
          grid-area: header
      - type: custom:better-minimalistic-area-card
        title: Server
        hide_unavailable: true
        icon: mdi:server
        show_area_icon: true
        shadow: true
        card_mod:
          style: |
            ha-card {
              background-color: rgba(25,0,0,0) !important; font-weight: bold;
            }
        style:
          sensors_icon_size: 35px
          sensors_button_size: 45px
          shadow_color: black
          color: white
        tap_action:
          action: navigate
          navigation_path: /config/areas/area/basement
        entities:
          - entity: sensor.server_temp_trend
            state_color: true
            state:
              - value: 28
                operator: ">="
                color: rgba(255,0,0,1)
              - value: 24
                operator: ">="
                color: rgba(255,255,0,1)
                background_color: null
              - value: 20
                operator: ">="
                color: rgba(128,239,0,1)
              - value: 0
                operator: ">"
                color: rgba(33,150,243,1)
          - entity: sensor.server_room_temp_humidity
            color: rgba(33,150,243,1)
        view_layout:
          grid-area: header
          show: always
2

I’m not good at maths here, but does 33+33+33 give 99 and not 100, and that missing 1% is what is bugging you?

3

Your right that that only gives 99 it’s a remnant from some different changes where I was contemplating having the area card and mini-graph card span over 2 rows and not the full width of the card i.e area card row 1 + 2 and mini graph card row 2+3 to make the information a bit more visible but I decided against that and never changed the template area and template rows back to 1 since for display purposes it doesnt really change anything.

This does not impact the spacing between the room cards.

4

I would suggest you to test with a simplified setup (and there is a high probability you will sort things out by yourself); besides, asking a question with such a long and complex code is a best way to confuse users and thus not to get an answer.