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

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:

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• Have made sure I am using the latest version of the plugin.
• Have followed the troubleshooting steps of the “Common Problems” section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• 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.

[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

[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!