Add support for card_margin in grid layouts

[cdhgee]

Fixes #194

[Madelena]

Has this been merged yet? This fix is sorely needed.

[ghost]

@thomasloven

[awgneo]

This code looks good :) Need this as well ;) *NVM noticed a bug

[awgneo]

I corrected and tested this change in this PR instead https://github.com/thomasloven/lovelace-layout-card/pull/210/files :)

[cdhgee]

Looks like you only changed line 152 in grid.ts, correct?

from

to

The fallback value of 4px 4px 8px was deliberate so that it retains the existing behavior if not explicitly defined. Your version of the PR would introduce a breaking change.

[awgneo]

When I tested this PR, my margins were not appropriately applied. So instead, I mirrored the existing column logic of

lovelace-layout-card/src/layouts/base-column-layout.ts

Line 256 in 466df9c

margin: var(--card-margin);

in my PR, which already has a fallback defined in its configuration

lovelace-layout-card/src/layouts/base-column-layout.ts

Line 95 in 466df9c

--card-margin: ${

I supported this strategy in the same way in my PR https://github.com/thomasloven/lovelace-layout-card/pull/210/files#diff-4f9f8ab90608430f9ad38a4a682f3e9f7cbd2aa69d11a636ec18b84ea33f5094R62, and it works as expected without breaking existing logic, with or without setting card_margin.

[pafnow]

Has this been merged yet? This fix is sorely needed.

Me too !

[snjoetw]

@thomasloven can we have this merged please?

[EmJay276]

Isn't this the same with additional overflow? #210

[sciurius]

@cdhgee With your version of card-layout.js I still get unwanted margins.

views:
      - type: custom:grid-layout
        layout:
          grid-template-columns: 50% 50%
          margin: 0
          padding: 0
          card_margin: 0 0 0 0
        cards:
              - type: markdown
                content: 'a'
              - type: markdown
                content: 'b'
              - type: markdown
                content: 'c'
              - type: markdown
                content: 'd'

Did I misunderstand this feature, or how to apply? I just copied card-layout.js to www/community/lovelace-layout-card/.

[cdhgee]

The intention was to fix the hardcoded card margins that are present in the grid layout. I'll have a play around using your layout config and see if I can figure out what's going on. I was using a custom:layout-card inside a panel layout instead of using the custom:grid-layout directly, maybe it behaves differently for some reason.

…

On Sun, Feb 26, 2023, 08:28 Johan Vromans ***@***.***> wrote: @cdhgee <https://github.com/cdhgee> With your version of card-layout.js I still get unwanted margins. views: - type: custom:grid-layout layout: grid-template-columns: 50% 50% margin: 0 padding: 0 card_margin: 0 0 0 0 cards: - type: markdown content: 'a' - type: markdown content: 'b' - type: markdown content: 'c' - type: markdown content: 'd' Did I misunderstand this feature? [image: scrot20230226152721] <https://user-images.githubusercontent.com/1118804/221416646-a3796889-246e-4341-ba0a-4982f3263bf0.png> — Reply to this email directly, view it on GitHub <#195 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJSWKKYNNDNPDCQR4AL523WZNSCFANCNFSM5TBIZ6AA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[cdhgee]

@sciurius This is how it looks with your code on my system:

I've noticed that Lovelace generates/uses gzipped versions of JS files in some instances. I suspect that even though you copied over the card-layout.js file, Lovelace is using the card-layout.js.gz compressed version. Renaming or removing the compressed version and restarting HA should force it to start using the updated card-layout.js file.

[sciurius]

I did replace layout-card.js, layout-card.js.gz, rollup.config.js and rollup.config.js.gz and restarted HA (and the browser) several times... The size difference shown in your screenshot made me realize that I forgot to switch to the bugfix-grid-layout-margin branch first.
Now it is working as expected. Great job!

For the sake of completeness, layout-card.js in the bugfix-grid-layout-margin branch of the repo is 49409 bytes while the one shown is 49535 bytes.

[cdhgee]

@sciurius Glad you got it working. The difference in size in my local copy vs the PR copy of layout-card.js is because I tweaked the console output of my local copy so that I could be certain that my updated copy was being used.

[atopetiff]

whats the problem with adding this option? please merge this.
the stupid default margin is complety nonesens and useless and a pain in the ass to fix in every update

[OpenCollab-StockholmUni]

Hi @atopetiff, we're researchers from Stockholm University studying communication on GitHub.

A message you posted may come across as rude, disrespectful, or unreasonable — something that could discourage others from contributing or sharing their ideas:

whats the problem with adding this option? please merge this.
the stupid default margin is...

You can opt out of messages like this here.

If you are the moderator of this repository, you can opt out of messages like this for the entire repo here.

Note

Participate in our four-question survey to provide feedback, and follow us for project updates!

---

This message was flagged by an automated system and reviewed using an AI tool to check for tone and clarity concerns.

We’re not here to judge. Our goal is to help make collaboration smoother for everyone.

Messages like this can sometimes cause stress or burnout for others involved in the project.

Here are a few quick tips to make messages clearer and easier to engage with:

• Rephrase strong or absolute language
• Explain your reasoning, or suggest an alternative
• Use tools like AI writing assistants to help reword or check tone

Thanks for contributing to GitHub and helping improve collaboration for everyone!