Layout-card, padding

Configuration Frontend
1

Hi,

I am trying to use a custom:layout-card, which does work, but somehow it does have some padding, as can be seen on the following screenshot.

The bottom row is the layout-card containing two mushroom-entity-cards. If I stop using the layout-card for that and instead use a grid card, I don’t have that padding that can be seen on the left and the right.

image

Here’s the code for the layout-card:

type: custom:layout-card
style:
  margin: 0
  padding: 0px
layout_type: custom:grid-layout
layout:
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
  grid-template-rows: min-content
  grid-template-areas: |
    "scene b2 b3 b4 trash trash"
  margin: 0
  padding: 0
  card_margin: 0
cards:
  - type: custom:mushroom-entity-card
    view_layout:
      grid-area: scene
    entity: sensor.abfallpapiermuell
    primary_info: none
    secondary_info: none
    icon: mdi:power-sleep
    icon_color: white
    tap_action:
      action: call-service
      service: scene.turn_on
      service_data:
        entity_id: scene.gute_nacht
    hold_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          content:
            type: custom:clock-weather-card
            entity: weather.wetter_zuhause
            temperature_sensor: sensor.nibe_bt1_outdoor_temperature
            forecast_rows: 5
            show_decimal: true
            weather_icon_type: fill
            date_pattern: cccc, dd.MM.
          dismissable: true
          title: Wetter
  - type: conditional
    view_layout:
      grid-area: b2
    conditions:
      - condition: state
        entity: sensor.abfallpapiermuell
        state: TESTEST
    card:
      type: custom:mushroom-entity-card
      entity: sensor.abfallpapiermuell
  - type: conditional
    view_layout:
      grid-area: b2
    conditions:
      - condition: state
        entity: sensor.abfallpapiermuell
        state: TESTEST
    card:
      type: custom:mushroom-entity-card
      entity: sensor.abfallpapiermuell
  - type: horizontal-stack
    view_layout:
      grid-area: trash
    cards:
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.abfallpapiermuell
            state: Morgen
        card:
          type: custom:mushroom-entity-card
          entity: sensor.abfallpapiermuell
          name: Papiermüll
          icon_color: white
          fill_container: false
          primary_info: state
          secondary_info: name
          card_mod:
            style: |
              ha-card {
                --ha-card-background: #8bc34a;
              }
       
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.abfallbiomuell
            state: in 2 Tagen
          - condition: state
            entity: sensor.abfallrestmuell
            state: in 2 Tagen
        card:
          type: custom:mushroom-entity-card
          entity: sensor.abfallbiomuell
          name: Rest/Bio
          icon_color: white
          fill_container: false
          primary_info: name
          secondary_info: state
          card_mod:
            style: |
              ha-card {
                --ha-card-background: #8bc34a;
              }

As you can see, I tried stuff like

margin: 0
padding: 0
card_margin: 0

but can’t seem to get the padding/margin to disappear… what am I missing?

2

Test this

layout:
  margin: 0px -15px 0px -15px
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
  grid-template-rows: min-content
  grid-template-areas: |
    "scene b2 b3 b4 trash trash"