I had the same annoying 4px margin issues. I have solved it by copying (directory: config/lovelace/www/community/lovelace-layout-card) layout-card.js to layout-card_rs.js.
Then edit layout-card_rs.js with an editor (File editor). Change ‘4px’ or ‘8px’ in every line with the word ‘margin’ to ‘0px’.
After that edit the file (directory: config/) and change the line ‘- url: /hacsfiles/lovelace-layout-card/layout-card.js’ in ‘- url: /hacsfiles/lovelace-layout-card/layout-card_rs.js’.
Now you got rid of the annoying 4px margins and it wil not be updated anymore.
HI all,
Is there a possibility to ‘stretch’ or ‘reduce’ cards so that they fit in the grid area’s and are aligned with each other ?
I’m having following issue:
The two flow cards (Power Flow Now / Energy Flows (today)) are not aligned with the apexcharts-card.
I’m using following grid configuration:
layout:
grid-template-columns: 0em 74px 25% 42% 25% auto
grid-template-rows: grid-title-row-height auto auto
grid-gap: 0.1em
grid-template-areas: |
". . title title title ."
". nav line1 line1 line1 ."
". nav line2 line2 line2 ."
Where the two flow charts are in a horizontal-stack and the 3 gauges and apex are in a vertical-stack WITHIN that horizontal-stack
Can anyone point me in the right direction please ?
Thanks a lot in advance !
Kr,
Bart
2 Likes
Hello @liminal,
please excuse my cheeky question, but what are you using for cards here? Could you perhaps provide the yaml code? Thank you, looks very nice
have you tried with “margin-bottom Or margin-top” on the Flow-cards ?
Also , it’s kind of “hard to imagine” why your columns-setup & your -areas looks as i does, when you only post the layout
Can anyone help me arrange the entities as shown below, thanks
row 1: 3 column
row 2: 2 column
1 Like
My question is still “Valid” 
… that is if you haven’t already figured it out, by reading some of the 730 post in here
I tried and followed the instructions here
grid-template-columns: repeat(3, 1fr)
grid-template-rows: 1fr 1fr
grid-template-areas: |
"a b c"
"d d e"
```
1 Like
I am trying to have a certain card disappear on screens under 800px, but while it resizes the cards and columns, hiding a card actually pushes it off the screen but it still remains visible. See gif for example:
At the top of the yaml, I have this:
type: custom:grid-layout
layout:
grid-template-columns: 33%
grid-template-rows: auto
grid-template-areas: |
"weather favorites person"
mediaquery:
"(max-width: 800px)":
grid-template-columns: 100%
grid-template-areas: |
"favorites"
"person"
And the card I am trying to have disappear on smaller screens is:
- type: custom:clock-weather-card
entity: weather.forecast_1833_green_hills_dr
view_layout:
grid-area: weather
mediaquery:
show: "(min-width: 800px)"
Any ideas? Thanks!
- type: custom:clock-weather-card
entity: weather.forecast_1833_green_hills_dr
view_layout:
grid-area: weather
show:
mediaquery: "(min-width: 800px)"
1 Like
Even works hiding whole type: vertical-stacks !
PS: However, if OP’s resolution is “uncertain” , then use a larger “min” number(in view-layout grid-area), than Max-width in top layout: mediaquery
Love layout-card, however I face the following challenge:
I’d like to show all lights that are currently on in a certain area, and only show two cards per row on mobile and 5 cards per row on wider screens so, I figured horizontal stack would make sense.
However currently it looks like this:
Does anyone know how I can make sure if 1 light is one it shows 50% and if 3 lights are on the first two show on the 1st row and the 3rd on the second row?
Of coutype or paste code hererse on larger screens they can all 3 be displayed on the 1st row.
This is my code:
type: "custom:layout-card"
layout_type: "custom:grid-layout"
layout:
grid-template-rows: "min-content"
grid-template-columns: "20% 20% 20% 20% 20%"
grid-template-areas: |
"title title title title title"
"keuken1 keuken1 keuken1 keuken1 keuken1"
mediaquery:
# Mobile
"(max-width: 393px)":
grid-template-columns: "1fr 1fr"
grid-template-areas: |
"title title"
"keuken1 keuken1"
"(max-width: 852px)":
grid-template-areas: |
"title title title title title"
"keuken1 keuken1 keuken1 keuken1 keuken1"
view_layout:
grid-area: "lights"
cards:
- view_layout:
grid-area: "title"
type: conditional
conditions:
- condition: "numeric_state"
entity: sensor.lights_on_in_the_kitchen
above: 0
card:
type: "custom:button-card"
template: "card_title"
name: "Keuken"
- view_layout:
grid-area: "keuken1"
type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: state
entity: light.keukenblok
state: "on"
card:
type: "custom:button-card"
template: card_light
entity: light.keukenblok
variables:
ulm_card_light_icon: "mdi:lightbulb-fluorescent-tube"
ulm_card_light_enable_slider: true
ulm_card_light_enable_color: true
ulm_card_light_force_background_color: true
- type: conditional
conditions:
- condition: state
entity: light.ledstrip_keukenblok_boven_2
state: "on"
card:
type: "custom:button-card"
template: card_light
entity: light.ledstrip_keukenblok_boven_2
variables:
ulm_card_light_icon: "mdi:led-strip-variant"
ulm_card_light_enable_slider: true
ulm_card_light_enable_color: true
ulm_card_light_force_background_color: true
- type: conditional
conditions:
- condition: state
entity: light.keukentafel
state: "on"
card:
type: "custom:button-card"
template: card_light
entity: light.keukentafel
variables:
ulm_card_light_icon: "mdi:ceiling-light-multiple"
ulm_card_light_enable_slider: true
ulm_card_light_enable_color: true
ulm_card_light_force_background_color: true
Try to use min-width on the button-cards, as you have it in a conditional-card, it will always “fill”, as much as it can in row-width … it’s the conditional-card which you have place in “grid-area” not the individual button-cards
Evening, not sure if I’m too tired or frustrated.
With this basic layout, grid with a vertical stack in each column, is there a way to remove/reduce the gap between the columns?
I have tried most of the style css I found in this forum, no luck 
views:
- title: Home
type: custom:grid-layout
badges: []
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-gap: 0px 0px
grid-template-columns: 25% 50% 25%
grid-template-areas: |
“left center right”
cards:
- type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
style: ''
cards:
- type: light
entity: light.wifi_dimmer_light
- type: light
entity: light.charlotte_main
- type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: light
entity: light.wifi_dimmer_light
- type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: light
entity: light.wifi_dimmer_light
Many thanks
It’s not a gap in the columns, your center-card is just not “wide” enough to fill it’s column
Try to make 4 column 25% each
grid areas:
" left center center right "
Just a wild shot, in the dark night, but you have to “Stretch” your “center” card
PS: Beside you haven’t Defined any
view_layout:
grid-area:
Should state which card/vertical-stack / in which grid-area … now they are just thrown in and you might get an undesired “reordering” when viewing in lower resolution ( Loosing the point with grid-area ! )
Actually you also want the first vertical-stack to “fill” 2 rows ( as you have stacked 2 cards in there, which makes row 1 , 2 cards high ! … which you eventually will find out/see (Just try to ad another card/vertical-layout , and see where it ends up)
left1 center1 center1 right1
left1 center2 center2 rightX
Thanks @boheme61,
This eventually did the job:
view_layout:
grid-area: "lights"
cards:
- view_layout:
grid-area: "keukenh"
type: conditional
conditions:
- condition: "numeric_state"
entity: sensor.lights_on_in_the_kitchen
above: 0
card:
type: "custom:button-card"
template: "card_title"
name: "Keuken"
- view_layout:
grid-area: "keuken1"
type: "custom:mod-card"
style:
hui-horizontal-stack-card$: |
#root {
flex-wrap: wrap;
}
#root > hui-conditional-card {
min-width: 174px;
max-width: 174px;
padding-block-end: 12px;
}
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: state
entity: light.keukenblok
state: "on"
card:
type: "custom:button-card"
template: card_light
entity: light.keukenblok
variables:
ulm_card_light_icon: "mdi:lightbulb-fluorescent-tube"
ulm_card_light_enable_color: true
ulm_card_light_force_background_color: true
…
Hi layout-card gurus
How do I I get these columns to justify into the center of the screen? So far everything justifies left. Do I really have to calculate 100% and then put in gap cards either side for padding???
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 3% 12% 12% 12% 12% 12% 3%
grid-template-rows: auto
grid-gap: 0px 0px
cards:...
Hi all,
I have the same problem of @domain_int .
Now it’s been about three days and can’t figure out why everything justified on the left instead of center.
Following my code:
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 500px 500px
grid-template-rows: auto
justify-content: center
grid-template-areas: |
"risorse storage"
"informazioni informazioni"
"pulsanti pulsanti"
mediaquery:
"(max-width: 650px)":
grid-template-columns: 100%
grid-template-areas: |
"risorse"
"storage"
"informazioni"
"pulsanti"
cards: ...
I also tried using “place-items” and allign-items", without success.
Thanks in advance
easiest way is to define columns either side of your content. Then you can define these as a % or ‘auto’.
Look at the below:
grid-template-columns: auto 500px 500px auto
grid-template-rows: auto
grid-template-areas: |
". risorse storage ."
". informazioni informazioni ."
". pulsanti pulsanti ."
mediaquery:
"(max-width: 650px)":
grid-template-columns: 100%
grid-template-areas: |
"risorse"
"storage"
"informazioni"
"pulsanti"
Hi,
Thanks for the advise.
Unfortunately, ad you can see it’s not working using 2 empty columns:
Also tries using percentage:
grid-template-columns: 35% 15% 15% 35%
grid-template-rows: auto
grid-template-areas: |
". risorse storage ."
". informazioni informazioni ."
". pulsanti pulsanti ."
mediaquery:
"(max-width: 650px)":
grid-template-columns: 100%
grid-template-areas: |
"risorse"
"storage"
"informazioni"
"pulsanti"
So the “justify” option doesn’t work?
Thanks