Additional margins when nesting Grid Layout-Cards within Grid View Layouts

[Jpsy]

My Home Assistant version: 2021.3.4

Layout-card version (FROM BROWSER CONSOLE):
2.2.3

What I am doing: Nesting Layout-Cards of type grid within View Layouts of type grid.

What I expected to happen: Nested layout-cards should align with normal cards in the grid layout.

What happened instead:

1. All nested layout-cards have a left and right margin of 4px: <div id="root"...>:

2. If the nested layout-card is the very first card in a View Layout Grid, it additionally gets an unwanted top margin of 4px: First <layout-card>: All other <layout-card>s:

3. (Looking at the CSS in 2. there should also be an additional bottom margin for the last nested card, but I did not witness this problem yet.)

Minimal steps to reproduce: This is a YAML block for a complete Lovelace view as shown in the screenshots above. It can be pasted into Lovelace in raw edit mode.

  - title: Grid Test
    path: grid-test
    type: 'custom:grid-layout'
    layout:
      grid-template-columns: 1fr 1fr
    badges: []
    cards:
      - &ref_1
        type: 'custom:layout-card'
        layout_type: grid
        cards:
          - &ref_0
            type: button
            tap_action:
              action: toggle
            entity: light.couch
          - *ref_0
        layout_options:
          grid-template-columns: 1fr 1fr
      - *ref_0
      - *ref_0
      - *ref_1

Error messages from the browser console:

---

By putting an X in the boxes ([X]) below, I indicate that I:

• [X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• [X] Have made sure I am using the latest version of the plugin.
• [X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• [X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[mtandrup]

I can confim this issue as I am experiencing the exact same behaviour.

[AdrinkBeer]

Hey!

Did you find a workaround for this ?

[Jpsy]

Nope. Unfortunately not.

[jelgblad]

An option to disable the margins on layout_type: grid completely would be wonderful.

Something like this:

type: custom:layout-card
layout_type: grid
container_margins: false
cards: []

In addition to solve this particular issue, it would also help with aligning this custom grid with the default grid-card which doesn't add any margins.

Here's the code where the margins gets added to #root: https://github.com/thomasloven/lovelace-layout-card/blob/b146132f829cb616d9228958098e4b2f3d7f7ecb/src/layouts/grid.ts#L130-L131

[elahd]

161 should help here -- can anyone test to confirm? To test:

1. Replace your own layout-card.js with this version (Edit: See comment below). On my system, this file is in /config/www/community/lovelace-layout-card. Yours should be in a similar location.
2. Modify your grid layout's config using yaml in the below format:

   style:
   margin: 0

   margin accept values in the standard CSS margin shorthand, e.g.: margin: 0px 10px 2px 5px.

In context, it'll look something like this:

title: Grid layout
type: custom:grid-layout
style:
  margin: 0
layout:
  grid-template-columns: auto 30px 25%
  grid-template-rows: auto
cards:
  - type: entities
    entities:
      - entity: light.bed_light
    view_layout:
      grid-area: header

3. In Home Assistant, go to Developer Tools → Services and call the "Home Assistant Frontend: Reload themes" service.
4. Clear your browser's cache.
5. Refresh page & check margins.

[davidmerrique]

@elahd Should this be padding instead?

Typically with CSS grid, you would use padding to add space around the grid container. (Or at least that's what I do) If 2 margins come into contact, the margins would overlap.

Either way 👍🏽

[elahd]

@davidmerrique I was working off of the existing styles, but more options can't hurt! I added support for configurable padding to the same PR. Use the updated layout-card.js here.

You can now do:

style:
  margin: 0
  padding: 4px

[oramirite]

This is an awesome change, thank you. But it doesn't seem to be working. I replaced /config/www/community/lovelace-layout-card/layout-card.js with your new one but the settings don't seem to take effect.

[thomasloven]

I think this can be solved with the new layout options margin, padding and card_margin.

[Jpsy]

Great news, thanks! I will check and report back here as soon as HA 2022.3 is released. (Sorry, can't run betas. Have to keep things stable or family will kill HA admin == me.)

[thomasloven]

If you don't rely on the GUI editors the latest version will work with 22.2 too, but you'll have to install it manually.

[u8915055]

I am having a similar problem here i believe. I have a grid layout and then a grid layout card within that layout. I am finding the margin, padding, and card_margin configuration options not having any effect. Here is my config.

This my view configuration. i have a left hand side dashboard and the rest of the viewport for the second column.

  - type: custom:grid-layout
    path: '2'
    title: '2'
    layout:
      grid-template-columns: 384px 1fr
      grid-template-rows: auto
      grid-template-areas: |
        "footer   rooms"
        "sidebar  rooms"
        ".        rooms"
      mediaquery:
         #phone
        "(max-width: 915px)":
          grid-template-columns: 384px
          grid-template-areas: |
            "footer"
            "sidebar"
            "rooms"
    cards:

Then this is my layout card to put another grid in that right hand 1fr column.

      - type: custom:layout-card
        view_layout:
          grid-area: rooms
        layout_type: grid
        layout:
          grid-template-columns: 475px 475px 475px
          grid-template-rows: auto
          margin: 0
          padding: 0
          card_margin: 0
          mediaquery:
            "(max-width: 915px)":
              grid-template-columns: 384px
            "(max-width: 1385px)":
              grid-template-columns: 475px
            "(max-width: 1860px)":
              grid-template-columns: 475px 475px
        cards: 

        - type: custom:decluttering-card
          template: sonos_declutter
          variables:
            - entity: media_player.denise_office

There are a bunch of other cards there in that grid layout. But for some reason i cannot get rid of margins for example.

[Jpsy]

@u8915055: Multiple problems with your config:

1. To get rid of all margins/paddings you must set margin/padding/card_margin not only in the grid card configs, but also in the view config.
2. The layout_type for the grid cards has changed from grid to layout_type: custom:grid-layout.

Here is a working view config for a 2 column view layout without margins:

  - title: Grid Test NEW
    path: grid-test-new
    type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr
      margin: 0
      padding: 0
      card_margin: 0

This is taken from the raw editor. You get this through these settings in the view's UI editor:

And here is a working card config for a 2 column card without margins:

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: button
    tap_action:
      action: toggle
    entity: light.couch
  - type: button
    tap_action:
      action: toggle
    entity: light.couch
layout:
  grid-template-columns: 1fr 1fr
  margin: 0
  padding: 0
  card_margin: 0

UI-Editor:

All this being said, some margins can be eliminated with the new properties, but not all of them. I will come to this in my next posting.

[thomasloven]

Remember that css margin can be a negative number too.

[Jpsy]

Hi @thomasloven, you are right, negative margins can resolve nearly all issues.

But there is one problem left. I already mentionen that in my original issue report. But let me isolate it again:

If you use grid layout cards nested within a grid layout, the very first card has a top-margin that differs from all other cards.

The following example is a grid view. Each row has a grid layout card with 2 inner button cards (the small buttons), followed by a stand-alone normal button card (the big button).

As you can see, the small buttons in the first row do not top-align with the big button (4px difference), while in the second row they align perfectly. The reason for that is the following constructed stylesheet that is attached to all <layout-card>s:

It zeroes out the top-margins of all cards in the view but the very first card. The very first card keeps it standard top-margin: 4px.

Sure, I could compensate this by giving that first card other margins than all following cards. But if I use grid-areas in my view (which I do often because it is a major advantage of grids) these areas can change their position and their order with different screen resolutions. The card which is the very first now may not be the first on a mobile.

Is it possible to remove this different handling? I don't care if all cards have 0 top-margin or 4px top-margin, as long as they are all the same. I guess this different handling is actually a remnant of non-grid views. But it does not really make sense in grid views.

Here is a YAML block for a complete Lovelace view to reproduce the above screen shot. It can be pasted into Lovelace in raw edit mode.

  - title: Grid Test NEW
    path: grid-test-new
    type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr
      margin: 0
      padding: 0
      card_margin: 0
    badges: []
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        cards:
          - type: button
            tap_action:
              action: toggle
            entity: light.couch
          - type: button
            tap_action:
              action: toggle
            entity: light.couch
        layout:
          grid-template-columns: 1fr 1fr
          margin: 0 -4px 0 -4px
          padding: 0
          card_margin: 0
      - type: button
        tap_action:
          action: toggle
        entity: light.couch
      - type: custom:layout-card
        layout_type: custom:grid-layout
        cards:
          - type: button
            tap_action:
              action: toggle
            entity: light.couch
          - type: button
            tap_action:
              action: toggle
            entity: light.couch
        layout:
          grid-template-columns: 1fr 1fr
          margin: 0 -4px 0 -4px
          padding: 0
          card_margin: 0
      - type: button
        tap_action:
          action: toggle
        entity: light.couch

Oh. And one more time: Many thanks for all your awesome Lovelace cards. My HA dashboards would not be possible without them!

[andrewjswan]

Same problem, could not override the margin values in #root > * can there be any solution?

[emufan]

Same here. I played around a lot for having card_margin set in grid layout. But nothing is working. Would appreciate any help.

[snairolf]

Same here. card_mod seems to be a no-op.

[prs-wjy]

same problem, is there any solution for it yet? i can't find any solution :(

[m-klecka]

Also have this problem, margins at sides and bottom when using custom-grid card. Can be solved by setting negative margins, but thats stupid when you have lot of cards.

[aaamoeder]

having the same issue .. driving my odd self nuts...

[EmJay276]

I have the same issue 😢

[matteobrusa]

same here, card_margin seems to have no effect. Edit: solved by creating a theme with masonry-view-card-margin: 0

[mrestorff]

For anyone wondering what exact negative margins have to be used: I solved this by using margin: "-4px -4px 0px -4px" in the layout_options, which is applied to the grid-layout element. This negates the 4px applied by the layout-card element.

While this is a good workaround, having layout-card detect when it's nested inside another one and apply the fix itself would be even better. Is there any way of implementing that level of self-awareness without too much effort?

[zholdak]

Nothing works anyway. Unwanted margins remains. No any hope to be fixed since Apr 6, 2021...

[hmax-72]

Remember that css margin can be a negative number too.

you're right: Setting margin to -4px did it.

- type: custom:layout-card
            layout_type: custom:grid-layout
            layout:
              grid-template-columns: 50% auto 25%
              grid-template-rows: auto
              grid-template-areas: |
                "left middle right"
              place-items: stretch stretch
              margin: -4px
            cards:
              - type: custom:mushroom-vacuum-card

[tbarbette]

Any solution by now? :) Negative margin does not work :(

[Lx]

From the README as currently published:

All column based layouts accept the following layout options: ... card_margin

I think all we need is for card_margin to be honoured by custom:grid-layout too. Currently it's defined in the BaseColumnLayout class:

https://github.com/thomasloven/lovelace-layout-card/blob/b63bf93daf166609ededbafc7b31a6e5d88037c3/src/layouts/base-column-layout.ts#L96

...but not the GridLayout class:

https://github.com/thomasloven/lovelace-layout-card/blob/b63bf93daf166609ededbafc7b31a6e5d88037c3/src/layouts/grid.ts#L54-L62

@thomasloven, can you foresee a problem with card_margin processing logic being either:

• copied from the BaseColumnLayout class to the GridLayout class; or
• moved to BaseLayout?

[Phobos-7]

This is what worked for me (example):

grid-template-columns: 35% 45% 20%
grid-template-rows: auto
width: 160
max_cols: 3
margin: -4px

[daha76]

I am fighting the same issue, for now, I fixed it like many others with a negative margin of -4px.

[Montreal666]

Fixed it by embedding everything in mod-card:

type: custom:mod-card
card_mod:
  style:
    layout-card$:
      grid-layout$: |
        :host {
          padding: 0rem !important;
        }
        #root {
          margin: 0rem !important;
        }
        #root > * {
          margin: 0.1rem !important;
        }
card:
  type: custom:layout-card
  layout_type: grid
  layout:
    grid-template-columns: 30% 30% 1fr
    grid-template-rows: auto
    grid-template-areas: |
      "A A1 A2"
      "A A1 B2"
  cards:

but having a working option directly under layout-card would be much simpler as this doesn't work here:

        layout:
          margin: 0
          padding: 0
          card_margin: 0

[TarcisioMenezes]

card_margin doesn't seem to be working for me either...

- type: custom:layout-card
  layout_type: custom:grid-layout
  layout:
    card_margin: '100px 100px 100px'
    padding: 0px
    grid-template-columns: 25% 25% 25% 25%
    grid-template-rows: auto
    grid-template-areas: |
      "1 1 1 2"

tested with 100px just to have a visual reference of the card moving if it was working. Nothing happens though ... margin and padding work.

[efaden]

Struggling with this also. I'm using the bubble card popups and between using the grid-layout view and the bubble card popups I have a bunch of blank space at the bottom.

[lisz8]

Another way to kill gaps inside layout-card is to use card_mod on each element.

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  margin: 0
  grid-gap: 0 0
  grid-template-columns: 1fr 1fr
  grid-template-rows: auto
cards:
  - type: custom:button-card
    name: Green
    styles:
      card:
        - background: green
        - border-radius: 0
    card_mod:
      style: |
        :host {
          --masonry-view-card-margin: 0px;
        }
  - type: custom:button-card
    name: Blue
    styles:
      card:
        - background: blue
        - border-radius: 0
        - color: white
    card_mod:
      style: |
        :host {
          --masonry-view-card-margin: 0px;
        }
  - type: custom:button-card
    name: Brown
    styles:
      card:
        - background: brown
        - border-radius: 0
    card_mod:
      style: |
        :host {
          --masonry-view-card-margin: 0px;
        }
  - type: custom:button-card
    name: Orange
    styles:
      card:
        - background: orange
        - border-radius: 0
    card_mod:
      style: |
        :host {
          --masonry-view-card-margin: 0px;
        }

Then you can set the gaps with "grid-gap", and whole card's margin with "layout -> margin" (also negative).