Have you ever fixed this issue? Iām experiencing this as well when i cast to a Nest Hubā¦
No unfortunately, I gave up. I probably will eventually try it again as I can see many uses for this for sure! Good luck I hope you figure it out
Hi All,
Had fun pulling my hair out with this one, can anyone tell me how to remove the margin at #root > * for all child cards of layout card?
This is the property i want to negate:
1 Like
You have to use custom:mod-card to get to this property.
Yeah been playing with that, but canāt figure out the right syntax to get there
This works for me:
- type: 'custom:mod-card'
card_mod:
style:
layout-card$:
grid-layout$: |
:host {
padding: 0px !important;
}
#root {
margin: 0px !important;
}
#root > * {
margin: 0px !important;
}
card:
type: 'custom:layout-card'
...
Or you can try:
- type: 'custom:layout-card'
style:
'--masonry-view-card-margin': 0px
That might work as well.
1 Like
And suddenly the shadow roots make sense! thank you, been bugging me that one, okay one more, how can i get a layout card to fill all available vertical space?
Setting the #root of grid-layout to 100% doesnāt change anything, but setting a hard value (like 1000px) does, so i know its the one i want to change to fill the square grid it is part of (see parent grid highlighted in light green). I want to fill the remaining vertical space per the arrows
That one actually needs two properties set to 100% in order to work:
- type: 'custom:mod-card'
card_mod:
style:
layout-card$:
grid-layout$: |
#root {
height: 100%;
}
.: |
ha-card {
height: 100%;
}
card:
type: 'custom:layout-card'
...
Hi, Iām trying to use the layout card with a grid layout to make my own navigation header while hiding the HA navigation header. This all works fine, but Iām wondering if I can make the header sticky. In plain CSS this seems to be a simple job, but I have no idea how to get this to work with the layout card.
Any ideas, maybe using card mod?
Same. Any ideas?
Actually:
2.2.0 IS BREAKING
Make card editors work again wen using view_layout which has replaced layout
Itās also now column_widths instead of column_width.
Unfortunately the developer decided to replace the component with something completely different that is completely incompatible with the old one.
And he did this by keeping the same name, making it impossible to downgrade to a functional version with HACS (can only downgrade to one of the last 5 versions - and he managed to release more than that).
Instead of keeping the old one and publishing a new component with whatever new features he wanted, he chose to break all layouts done by everyone that ever used this component until now.
I have spent the last few hours removing this broken component and replacing with default āgridā and āvertical-stackā/āhorizontal-stackā. At least these will work and I donāt need to learn new parameters every time the developer decides to break everything again.
trust is hard to get and easy to loseā¦ especially when doing such moves.
Hi, I hope anyone can help me, I am trying to set margins on the columns, which I now achieve by setting the margins on each card or stack manually.
With reading around a bit I found that I can use this:
- type: custom:mod-card
style: |
layout-card {
--masonry-view-card-margin: 7px;
}
card:
This works absolutely fine and exactly what I needed. However it only does this on larger screens. When the aspect ratio drops to a certain level this setting gets overridden by whatever the original settings are.
I have tried setting !important but this did not help. Can anyone help me?
Not, that I would in any way back what youāre saying, it is in most things your opinion and youāre entitled as such.
But the quoted part is definitively not true:
You can always change the number of versions that is shown, so you can downgrade every time, to every old version that is still listed at Github.
Go to Integrations > HACS > Configure and change the number of releases to showā¦ 
Maybe it would have helped, if you had read the release notes and asked before you did this stunt of updating and deleting. Just sayingā¦
1 Like
Thanks, I will check that. Itās an workaround since it would be required for every update (or new install) from now on to do this extra steps.
Anyway, itās my opinion and trust lost canāt be gained back easily. I wonāt learn again a new syntax just to see it changed again with complete disregard to anyone else that built things on top.
Hi @thomasloven Iāve been trying to get one specific card working with type: 'custom:grid-layout' without success.
It is the BOM Weather Card by DavidFW1960
I have asked him, he requested I ask you as well.
His card shows up without any changes to itās config, but when adding:
view_layout:
grid-area: ***
it breaks.
Curiously, it shows up and in the correct grid location while in Lovelace edit mode, but once exiting edit mode it disappears.
Other cards, including type: 'custom:weather-card' work just fine.
Is there anything special a card need in itās source code to make it work correctly in grid layout mode?
My .yaml:
title: BOM Test
views:
- title: Home
path: home
type: 'custom:grid-layout'
layout:
grid-template-columns: 10% 80% 10%
grid-template-rows: auto
grid-template-areas: |
". bom ."
badges: []
cards:
- type: 'custom:bom-weather-card'
view_layout:
grid-area: bom
entity_current_conditions: sensor.noble_park_icon_descriptor_0
entity_temperature: sensor.moorabbin_airport_temp
entity_forecast_high_temp_1: sensor.noble_park_temp_max_1
etc... etc........
Hi,
I have divided my dashboard to header, footer and mid section. Now Iām trying to add a picture to the mid section to work as background. All is working well, except there is a visible gap between the picture and edge of the footer (on the bottom) and header (on the top) section. No matter what I do I canāt get rid of that gap. Is there a way how to stretch the picture from header to footer?
Here is the portion of the code:
- panel: false
path: office
badges: []
title: Office
type: custom:grid-layout
layout:
grid-template-columns: 955px
grid-template-rows: 91px 415px 96px
grid-template-areas: |
"header"
"main"
"footer"
cards:
- type: picture-elements #Top Header Section
image: /local/lovelace/images/banner_top.png
view_layout:
grid-area: header
style: |
ha-card {
background: rgba(42, 46, 48, 1)
position: fixed
margin-bottom: 0px
padding-bottom: 0px
}
elements:
- type: state-label
- type: state-label
- type: custom:text-element
- type: state-label
- type: picture-elements # Middle Section
image: /local/lovelace/images/background1.jpg
view_layout:
grid-area: main
elements:
- type: 'custom:layout-card'
style:
bottom: -50%
left: 50%
margin-top: -15px
layout_type: custom:grid-layout
#view_layout:
# grid-area: main
layout:
grid-template-rows: 15px 130px 130px 130px 20px
grid-template-columns: 118px 118px 118px 118px 118px 118px 118px 118px
grid-gap: 0px 0px
cards:
- name: QNAP NAS
- name: ProxmoxVE
...
- type: picture-elements #Bottom Footer Section
Maybe there is other way how to achieve this?
Thanks
1 Like
@marrossko
Iām no expert at this, but it might help to use percentages instead of pixels for your grid-template-columns: and grid-template-rows: values?
That would ensure youāre using 100% of the space.
layout:
grid-template-columns: 100%
grid-template-rows: 33% 66% 33%
trying to nest a layout within a layoutā¦has anyone done this and can provide an example?
Hello,
Iām looking to have a layout with variable column size. My understanding is that grid layout is the right choice for this. I manage to have something that looks like this:
Is it possible to avoid the blank spaces (marked as X in screenshot) between cards? Apologies if this is obvious but Iām looking at the documentation (A Complete Guide to Grid | CSS-Tricks) and itās not obvious to me. Can anyone point me in the right direction?
For reference, the code that Iām using is quite minimal:
type: custom:grid-layout
title: Grid layout
layout:
grid-template-columns: 24% 23% 31% 22%
grid-template-areas: |
"c11 c12 c13 c14"
"c21 c22 c23 c24"
cards:
To place the cards I use (where cxx is c11, c12, etc):
view_layout:
grid-area: cxx