Lovelace-layout-card - how do I remove frame and distance between cards

Mastiff · September 1, 2026, 7:38pm

I have this that is almost the way I want it:

But I would like to move 0/188 and Fart/Dybde close to each other, and preferably get rid of all the frames. This is the code I have:

views:
  - type: custom:masonry-layout
    card_margin: -10px
    path: dypriggmobil
    title: Dypriggmobil
    icon: mdi:cellphone
    cards:
      - type: custom:button-card
        variables:
          rød_bakgrunn: red
          grønn_bakgrunn: green
          gul_bakgrunn: yellow
          hvit_bakgrunn: white
          hvit_skrift: white
          svart_skrift: black
          stor_skrift: 250px
          liten_skrift: 200px
          dypriggdybde: '[[[ return states[''sensor.dypriggdybde'']?.state; ]]]'
          dypriggbunnavstand: '[[[ return states[''sensor.dypriggbunnavstand'']?.state; ]]]'
        custom_fields:
          dypriggbunnavstand: |
            [[[
              return `<span style="align: center;">${ Math.round(states['sensor.dypriggbunnavstand'].state)  }</span> `
            ]]]
        show_icon: false
        show_name: false
        styles:
          card:
            - border-style: none
            - background-color: >
                [[[  if ((variables.dypriggdybde == 0)) return
                variables.hvit_bakgrunn;  if ((variables.dypriggdybde != 0) &&
                (variables.dypriggbunnavstand <= 5)) return
                variables.rød_bakgrunn; if ((variables.dypriggdybde != 0) &&
                (variables.dypriggbunnavstand >= 10)) return
                variables.grønn_bakgrunn; if ((variables.dypriggdybde != 0) &&
                (5 < variables.dypriggbunnavstand < 10)) return
                variables.gul_bakgrunn; ]]]
            - height: 385px
          grid:
            - grid-template-areas: '"dypriggbunnavstand"'
            - height: 390px
          custom_fields:
            dypriggbunnavstand:
              - color: >
                  [[[ if ((variables.dypriggdybde != 0) &&
                  (variables.dypriggbunnavstand <= 5)) return
                  variables.hvit_skrift;  if ((variables.dypriggdybde != 0) &&
                  (variables.dypriggbunnavstand > 10)) return
                  variables.hvit_skrift; 
                   if ((variables.dypriggdybde != 0) && (5 > variables.dypriggbunnavstand < 10)) return variables.svart_skrift; 
                   if ((variables.dypriggdybde == 0)) return variables.hvit_skrift; 
                  ]]]
              - font-size: >
                  [[[ if (variables.dypriggbunnavstand > 100) return
                  variables.liten_skrift; if (variables.dypriggbunnavstand <
                  100) return variables.stor_skrift; ]]]
      - type: custom:vertical-stack-in-card
        cards:
          - show_name: true
            show_icon: false
            type: custom:button-card
            variables:
              color_background: red
              color_text: white
              value: '[[[ return states[''sensor.dypriggdybde'']?.state; ]]]'
            styles:
              card:
                - height: 50px
                - border-style: none
                - background-color: >
                    [[[ if (variables.value == 0) return
                    variables.color_background; ]]]
              name:
                - color: >
                    [[[ if (variables.value == 0) return variables.color_text;
                    ]]]
            tap_action:
              action: perform-action
              data:
                topic: madmax/dypriggdybde
                payload: '0'
              perform_action: mqtt.publish
            hold_action:
              action: none
            icon: ''
            icon_height: 50px
            name: '0'
          - show_name: true
            show_icon: false
            type: custom:button-card
            variables:
              color_background: red
              color_text: white
              value: '[[[ return states[''sensor.dypriggdybde'']?.state; ]]]'
            styles:
              card:
                - height: 50px
                - border-style: none
                - background-color: >
                    [[[ if (variables.value == 5) return
                    variables.color_background; ]]]
              name:
                - color: >
                    [[[ if (variables.value == 5) return variables.color_text;
                    ]]]
            tap_action:
              action: perform-action
              data:
                topic: madmax/dypriggdybde
                payload: '5'
              perform_action: mqtt.publish
            hold_action:
              action: none
            icon: ''
            icon_height: 40px
            name: '5'
          - show_name: true
            show_icon: false
            type: custom:button-card
            variables:
              color_background: red
              color_text: white
              value: '[[[ return states[''sensor.dypriggdybde'']?.state; ]]]'
            styles:
              card:
                - height: 50px
                - border-style: none
                - background-color: >
                    [[[ if (variables.value == 10) return
                    variables.color_background; ]]]
              name:
                - color: >
                    [[[ if (variables.value == 10) return variables.color_text;
                    ]]]
            tap_action:
              action: perform-action
              data:
                topic: madmax/dypriggdybde
                payload: '10'
              perform_action: mqtt.publish
            hold_action:
              action: none
            icon: ''
            icon_height: 40px
            name: '10'
          - show_name: true
            show_icon: false
            type: custom:button-card
            variables:
              color_background: red
              color_text: white
              value: '[[[ return states[''sensor.dypriggdybde'']?.state; ]]]'
            styles:
              card:
                - height: 50px
                - border-style: none
                - background-color: >
                    [[[ if (variables.value == 15) return
                    variables.color_background; ]]]
              name:
                - color: >
                    [[[ if (variables.value == 15) return variables.color_text;
                    ]]]
            tap_action:
              action: perform-action
              data:
                topic: madmax/dypriggdybde
                payload: '15'
              perform_action: mqtt.publish
            hold_action:
              action: none
            icon: ''
            icon_height: 40px
            name: '15'
          - show_name: true
            show_icon: false
            type: custom:button-card
            variables:
              color_background: red
              color_text: white
              value: '[[[ return states[''sensor.dypriggdybde'']?.state; ]]]'
            styles:
              card:
                - height: 50px
                - border-style: none
                - background-color: >
                    [[[ if (variables.value == 20) return
                    variables.color_background; ]]]
              name:
                - color: >
                    [[[ if (variables.value == 20) return variables.color_text;
                    ]]]
            tap_action:
              action: perform-action
              data:
                topic: madmax/dypriggdybde
                payload: '20'
              perform_action: mqtt.publish
            hold_action:
              action: none
            icon: ''
            icon_height: 40px
            name: '20'
          - show_name: true
            show_icon: false
            type: custom:button-card
            variables:
              color_background: red
              color_text: white
              value: '[[[ return states[''sensor.dypriggdybde'']?.state; ]]]'
            styles:
              card:
                - height: 50px
                - border-style: none
                - background-color: >
                    [[[ if (variables.value == 25) return
                    variables.color_background; ]]]
              name:
                - color: >
                    [[[ if (variables.value == 25) return variables.color_text;
                    ]]]
            tap_action:
              action: perform-action
              data:
                topic: madmax/dypriggdybde
                payload: '25'
              perform_action: mqtt.publish
            hold_action:
              action: none
            icon: ''
            icon_height: 40px
            name: '25'
          - show_name: true
            show_icon: false
            type: custom:button-card
            variables:
              color_background: red
              color_text: white
              value: '[[[ return states[''sensor.dypriggdybde'']?.state; ]]]'
            styles:
              card:
                - height: 50px
                - border-style: none
                - background-color: >
                    [[[ if (variables.value == 30) return
                    variables.color_background; ]]]
              name:
                - color: >
                    [[[ if (variables.value == 30) return variables.color_text;
                    ]]]
            tap_action:
              action: perform-action
              data:
                topic: madmax/dypriggdybde
                payload: '30'
              perform_action: mqtt.publish
            hold_action:
              action: none
            icon: ''
            icon_height: 40px
            name: '30'
          - show_name: true
            show_icon: false
            type: custom:button-card
            variables:
              color_background: red
              color_text: white
              value: '[[[ return states[''sensor.dypriggdybde'']?.state; ]]]'
            styles:
              card:
                - height: 50px
                - border-style: none
                - background-color: >
                    [[[ if (variables.value == 35) return
                    variables.color_background; ]]]
              name:
                - color: >
                    [[[ if (variables.value == 35) return variables.color_text;
                    ]]]
            tap_action:
              action: perform-action
              data:
                topic: madmax/dypriggdybde
                payload: '35'
              perform_action: mqtt.publish
            hold_action:
              action: none
            icon: ''
            icon_height: 40px
            name: '35'
          - show_name: true
            show_icon: false
            type: custom:button-card
            variables:
              color_background: red
              color_text: white
              value: '[[[ return states[''sensor.dypriggdybde'']?.state; ]]]'
            styles:
              card:
                - height: 50px
                - border-style: none
                - background-color: >
                    [[[ if (variables.value == 40) return
                    variables.color_background; ]]]
              name:
                - color: >
                    [[[ if (variables.value == 40) return variables.color_text;
                    ]]]
            tap_action:
              action: perform-action
              data:
                topic: madmax/dypriggdybde
                payload: '40'
              perform_action: mqtt.publish
            hold_action:
              action: none
            icon: ''
            icon_height: 40px
            name: '40'
        show_state: false
        horizontal: true
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:button-card
            custom_fields:
              fart: |
                [[[
                  return `<span style="align: center; font-size: 120px; line-height: 0.">${ Math.round(states['sensor.fart'].state) } </span>`
                ]]]
            show_icon: false
            show_name: false
            styles:
              card:
                - height: 200px
                - border-style: none
              grid:
                - grid-template-areas: '"fart"'
                - grid-template-columns: 1fr
          - type: custom:button-card
            variables:
              stor_skrift: 120px
              liten_skrift: 100px
              dyp: '[[[ return states[''sensor.dybde'']?.state; ]]]'
            custom_fields:
              dybde: |
                [[[
                  return `<span style="align: center; line-height: 1;">${Math.round(states['sensor.dybde'].state) } </span>`
                ]]]
            show_icon: false
            show_name: false
            styles:
              card:
                - height: 200px
                - border-style: none
              grid:
                - grid-template-areas: '"dybde"'
                - grid-template-columns: 1fr
              custom_fields:
                dybde:
                  - font-size: >
                      [[[ if (variables.dyp > 100) return
                      variables.liten_skrift; if (variables.dyp < 100) return
                      variables.stor_skrift; ]]]
        horizontal: true
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:button-card
            name: Fart
            show_icon: false
            show_name: true
            styles:
              card:
                - height: 35px
                - border-style: none
              name:
                - font-size: 31px
                - color: black
          - type: custom:button-card
            name: Dybde
            show_icon: false
            show_name: true
            styles:
              card:
                - height: 35px
                - border-style: none
              name:
                - font-size: 31px
                - color: black
        horizontal: true
      - type: custom:button-card
        custom_fields:
          klokke: |
            [[[
              return `<span style="align: center; font-size: 80px">${states['sensor.time'].state}</span>`
            ]]]
        show_icon: false
        show_name: false
        styles:
          card:
            - border-style: none
            - height: 100px
          grid:
            - grid-template-areas: '"klokke"'
            - grid-template-columns: 1fr
    layout:
      max_cols: 1

I thought the card_margin at the top should move cards closer to each other, but it doesn’t do anything. Can somebody please tell me what I’m doing wrong?

boheme61 · September 1, 2026, 10:14pm

For Your information, You are Not Using any Layout-Card, But a masonry-Layout-View
( Most likely with 1 column ? ), with ( first ) a single button-card and then a few vertical-stack-in-cards, with button-cards inside.
So you need to “address” each in different levels

As i for good reasons never used Masonry-Layout-View, i can’t post any examples
Also Your “frames” is “borders” ( i.e border=none)

Alignment of the 2 ( fart dybde ) can be addressed in different ways
i.e , under type custom:button-card ( after styles ) (addressing the :host )

        uix:
          style: |
            :host {
              **border: none;**
              max-height: 60px;
              max-width: 120px;
              margin-top: -35px !important;
              **margin-left: 30px !important;**( for fart ) VS **margin-right: 30px !important;**(for dybde)
              padding: 0% !important;
            }

However, i believe you can also set this direct in the “styles” of the - card ( then it’s the content you address )

PS: i guess you are aware why i posted above url

Mastiff · September 2, 2026, 11:03am

Thanks for answering! I was so sure that type: custom:masonry-layout meant that I was using the lovelace-layout-card, it says so in the settings for the dashboard:

And I wasn’t clear enough, I guess. I wasn’t talking about the fields Fart and Dybde togheter, I meant 0 and Fart together and 188 and Dybde together, so vertically. The uix code did not work, maybe the best would be to remake it as a custom button card with custom fields, I’ll look at that this evening.

boheme61 · September 2, 2026, 11:33am

Basically i don’t see the reason to create 2 new cards just to give the above a " - name "
Thats what button-card are made for, i.e place - name field under the State filed

Ildar_Gabdullin · September 2, 2026, 11:33am

This is a custom layout card for sure.

boheme61 · September 2, 2026, 11:40am

Call it what You want

Do You notice the different , and Mastiff View ?

However Yes Thomas call the integration Lovelace-layout-card
But with Masonry-view and 1 column ?, there is no need for this “integration” at all, as he could have used a Panel-View, with vertical-stack “Masonry-view has no effect with 1-Column”

Mastiff · September 2, 2026, 11:50am

I am getting closer by using a second custom field in the custom button card. I think this is probably as good as I need it:

type: custom:button-card
variables:
  stor_skrift: 200px
  liten_skrift: 180px
  dyp: '[[[ return states[''sensor.dybde'']?.state; ]]]'
custom_fields:
  dybde: |
    [[[
      return `<span style="align: center;">${Math.round(states['sensor.dybde'].state) } </span>`
    ]]]
  dybdenavn: |
    [[[
      return `<span style="align: center; font-size: 50px; line-height: 0.">Dybde </span>`
    ]]]
show_icon: false
show_name: false
styles:
  card:
    - height: 250px
    - border-style: none
  grid:
    - grid-template-areas: '"dybde" "dybdenavn"'
    - grid-template-columns: 1fr
  custom_fields:
    dybde:
      - font-size: >
          [[[ if (variables.dyp > 100) return variables.liten_skrift; if
          (variables.dyp < 100) return variables.stor_skrift; ]]]
        padding: 0% !important;
    dybdenavn:
      - padding: 0% !important;
        margin-top: -30px !important;

I think I will try to put the clock inside the same custom button so I can get rid of the border between that Fart/Dybde. I just need to read a bit more of the documentation, so I can see how have 0/fart and 1/Dybde on one line and the clock on the next line. Or maybe just use a stack-in card in a stack-in card, with the first being vertical, and the one inside being the horizontal with Fart and Dybde.

Mastiff · September 2, 2026, 12:12pm

And that finally worked with card_mod:

type: custom:vertical-stack-in-card
cards:
  - type: custom:vertical-stack-in-card
    card_mod:
      style: |
        :host {
          --stack-card-margin: 0px;
          --ha-card-border-radius: 12px;
          --ha-card-border-width: 0px;
        }
    cards:
      - type: custom:button-card
        custom_fields:
          fart: |
            [[[
              return `<span style="align: center; line-height: 0.">${ Math.round(states['sensor.fart'].state) } </span>`
            ]]]
          fartnavn: |
            [[[
              return `<span style="align: center; font-size: 50px; line-height: 0.">Fart </span>`
            ]]]
        show_icon: false
        show_name: false
        styles:
          card:
            - height: 250px
            - border: none
          grid:
            - grid-template-areas: '"fart" "fartnavn"'
          custom_fields:
            fart:
              - font-size: 200px
                padding: 0% !important;
            fartnavn:
              - padding: 0% !important;
                margin-top: -30px !important;
      - type: custom:button-card
        variables:
          stor_skrift: 200px
          liten_skrift: 180px
          dyp: '[[[ return states[''sensor.dybde'']?.state; ]]]'
        custom_fields:
          dybde: |
            [[[
              return `<span style="align: center;">${Math.round(states['sensor.dybde'].state) } </span>`
            ]]]
          dybdenavn: |
            [[[
              return `<span style="align: center; font-size: 50px; line-height: 0.">Dybde </span>`
            ]]]
        show_icon: false
        show_name: false
        styles:
          card:
            - height: 250px
            - border-style: none
          grid:
            - grid-template-areas: '"dybde" "dybdenavn"'
            - grid-template-columns: 1fr
          custom_fields:
            dybde:
              - font-size: >
                  [[[ if (variables.dyp > 100) return variables.liten_skrift; if
                  (variables.dyp < 100) return variables.stor_skrift; ]]]
                padding: 0% !important;
            dybdenavn:
              - padding: 0% !important;
                margin-top: -30px !important;
    horizontal: true
  - type: custom:button-card
    custom_fields:
      klokke: |
        [[[
          return `<span style="align: center; font-size: 80px">${states['sensor.time'].state}</span>`
        ]]]
    show_icon: false
    show_name: false
    styles:
      card:
        - border-style: none
        - height: 100px
      grid:
        - grid-template-areas: '"klokke"'
        - grid-template-columns: 1fr

boheme61 · September 2, 2026, 12:13pm

For that you need to address the GAP , it’s not “borders !”
Either Gap, or you could i.e use margin-top: -20px , on the clock card ( That is if you have "removed the “borders”, otherwise it will look odd

But yes you can have as many fields you want in custom:button-card( using the grid for what it’s for ), You could also just use 1 of the “Default-Fields” , i believe there is a pic in the docs how the default card is build up, as well as how to use the grid-feature

This is a Card i used for awhile, it’s a 1 vertical-stack with 2 text-diveder-row, and 2 horizontel-stack, with 5 Custom-buttons in each ( Each Day & Hour is a Custom:button-card )
With reference to the same custom:button-card Template in the View-header
and referencing “entity.xxxx” instead of whole names in the templates, and using 3 of the default-fields and 6 custom_fields
Yes it’s “tiny” buttons with “compressed” info , from when i was playing around