Same problem here, you can downgrade to version 12 to solve this.
Hello guys, iām trying to understand how to align all the column to the left.
The default behavior of this card put the cards on the middle of the screen.
Can i set it to āstartā from the left side?
Thank you!
EDIT: Iām using it in panel mode!
1 Like
Iām actually on version 15 which works for me.
Any news about this?
I temporary switched to Layout Card Gridder.
1 Like
Hello friends. I ask because I know that at the beginning it was very complicated and now it is solved. I have a view that is armed with a 2x2 grid, but when I break the phone I would like to see it as a 1x4 grid or vertically. If there is a solution for this, I would like you to help me. Excellent what they programmed and thank you very much.
type: 'custom:layout-card'
layout: vertical
column_width: 100%
cards:
- type: 'custom:layout-card'
layout: grid
gridrows: auto auto
gridcols: 40% 60%
min-witdh: 40px
cards:
- type: thermostat
entity: climate.acuario
gridrow: 1 / 1
gridcol: 1 / 1
style: 'ha-card { height: 100%; }'
- type: 'custom:mini-graph-card'
entities:
- sensor.temperature
hours_to_show: 24
name: Temperatura de acuario
points_per_hour: 2
show:
extrema: true
- type: vertical-stack
gridrow: 2 / 4
gridcol: 1
style: 'ha-card { height: 100%; }'
cards:
- type: horizontal-stack
cards:
- entity: switch.enchufe_termometro_acuario
hold_action:
action: more-info
icon: 'mdi:fan'
icon_height: 40px
name: Fan
show_icon: true
show_name: true
tap_action:
action: toggle
theme: default
type: entity-button
- color: var(--state-icon-active-color)
entity: input_boolean.clima_manual
icon: 'mdi:air-conditioner'
icon_height: 40px
name: Aire
state:
- color: null
value: 'off'
type: 'custom:button-card'
- entity: switch.enchufe_retorno
hold_action:
action: more-info
icon: 'mdi:power'
icon_height: 40px
name: Retorno
show_icon: true
show_name: true
tap_action:
action: toggle
theme: default
type: entity-button
- entity: switch.enchufe_skimmer
hold_action:
action: more-info
icon: 'mdi:power'
icon_height: 40px
name: Skimmer
show_icon: true
show_name: true
tap_action:
action: toggle
theme: default
type: entity-button
- type: horizontal-stack
cards:
- entity: switch.sonoff_refugio
hold_action:
action: more-info
icon: 'mdi:radiator'
icon_height: 40px
name: Calefactor
show_icon: true
show_name: true
tap_action:
action: toggle
type: entity-button
- entity: switch.sonoff_refugio
hold_action:
action: more-info
icon: 'mdi:ceiling-light'
icon_height: 40px
name: Refugio
show_icon: true
show_name: true
show_state: false
tap_action:
action: toggle
type: button
- entity: switch.enchufe_luz_sump
hold_action:
action: more-info
icon: 'mdi:ceiling-light'
icon_height: 40px
name: Luz Sump
show_icon: true
show_name: true
tap_action:
action: toggle
type: button
- type: 'custom:flex-table-card'
gridrow: 2 / 2
gridcol: 2 / 2
columns:
- attr_as_list: mediciones
modify: x.KH
name: KH
- attr_as_list: mediciones
modify: x.CA
name: CA
- attr_as_list: mediciones
modify: x.MG
name: MG
- attr_as_list: mediciones
modify: x.NO3
name: NO3
- attr_as_list: mediciones
modify: x.PO4
name: PO4
- attr_as_list: mediciones
modify: x.Fecha
name: Fecha
entities:
include: sensor.mediciones
title: Mediciones del Acuario
Continuing the discussion from 
Layout-card - Take control of where your cards end up:
Hello,
I am a newbie.
Iāve been working on the current problem most of the weekend and canāt get any further.
Advance info:
The following file ui-lovelace.yaml is only a test file for error analysis and to describe the problem. Even in this shortened version, the layout card does not work as intended.
Problem description:
I put the ui-lovelace.yaml in the config directory, restart the application via āserver managementā and nothing is displayed in the home view (see screenshot). In the other views (light and music) the cards are displayed immediately.
In the dashboard-view i have to click on āRefreshā to get the cards displayed.
Where is my mistake?
Thank you in advance for your help
ui-lovelace.yaml:
title: Home
path: home
views:
- path: dasboard
title: dashboard-Tab
icon: 'mdi:home-assistant'
panel: true
cards:
- type: 'custom:layout-card'
layout: horizontal
max_columns: 3
cards:
- type: markdown
title: Card-1
content: Dummy 1
- type: markdown
title: Card-2
content: Dummy 1
- type: markdown
title: Card-3
content: Dummy 1
- type: markdown
title: Card-4
content: Dummy 1
- type: markdown
title: Card-5
content: Dummy 1
- type: markdown
title: Card-6
content: Dummy 1
- path: light
title: Light-Tab
icon: 'mdi:lamp'
panel: true
cards:
- type: 'custom:layout-card'
layout: horizontal
max_columns: 3
cards:
- type: markdown
title: Card-1
content: Dummy 1
- type: markdown
title: Card-2
content: Dummy 1
- type: markdown
title: Card-3
content: Dummy 1
- type: markdown
title: Card-4
content: Dummy 1
- type: markdown
title: Card-5
content: Dummy 1
- type: markdown
title: Card-6
content: Dummy 1
- path: music
title: Music-Tab
icon: 'mdi:music'
panel: true
cards:
- type: 'custom:layout-card'
layout: horizontal
max_columns: 3
cards:
- type: markdown
title: Card-1
content: Dummy 1
- type: markdown
title: Card-2
content: Dummy 1
- type: markdown
title: Card-3
content: Dummy 1
- type: markdown
title: Card-4
content: Dummy 1
- type: markdown
title: Card-5
content: Dummy 1
- type: markdown
title: Card-6
content: Dummy 1
1 Like
you can use my fork, linked to in the post just above yours. Iāve made it easy to define a responsive grid layout, example code is available in the readme.
Iāve read in a WTH post that native support for this will come to lovelace at some point, but untill thenā¦
I think youāre correct about some native support.
It is implied in this.
Thanks friend
@kdw2060
Does your fork re-instate the top and side margins that suddenly disappeared with HA 0.116.x ?
My grid layout views have horizontal and intermittent vertical scroll bars now which do not go away if the browser is maximised or zoomed out. Tried this on Edge and Chrome, both are the same.
probably no difference there, I havenāt changed any of the existing code, just added support for grid-area(s) css properties and responsiveness
Hi,
Thanks, will definitely look into that.
Never thought to look in the card-mod discussion as my issue is only with grid views.
1 Like
you can get the padding back by modifying layout-card.js and changing the padding for :host in get_styles() from 0 to whatever you want (5px seems to work pretty well for me), and then reloading HA.
`}static get styles(){return r`
:host {
padding: 0;
display: block;
margin-bottom: 0!important;
the only thing iām having an issue with here is that itās causing issues on nested layout cards (it adds the padding on every one, so nested ones have too much padding). still working on getting it to only add the padding on the top levelā¦
Hi,
That didnāt solve my grid layout problem but thanks for the pointer.
Hi,
Thanks.
I can see the effects but the scrollbars are still there. Its weird that this just manifested itself with 0.116.x
There are a couple of others that have the same issue. thereās an issue posted on github for it.
thatās odd, i donāt have any scrollbar issues even without the marginsā¦
Do you use grid layouts.
I only have the scrollbar issues with these. My native lovelace view only has the vertical scrollbar as I would expect as it is a big view. But that doesnāt have the horizontal scrollbar. My other layout-card view is a standard 2 column vertical view and this doesnāt have any scrollbars at all.
So it is layout-card grid layout problem as far as I can see and it only manifested itself with HA 0.116.x
But if you use grid layouts and you donāt have this issue then I am at a loss as I havenāt change anything in my lovelace yaml but all of a sudden scrollbars.
I have this with Chrome and Edge on my PC and Chrome and Edge and Silk on my amazon tablet,
that would explain it, i missed the part about you using grids. i do not, i have standard vertical layout that i put breaks in manually.