It works thank you!
I am considering update, but hesitating to do it as I am not sure how to solve transition (modification of lovelace yaml)
In my case I have following and I would like to keep it.
- type: custom:layout-card
layout: vertical
column_num: 8
column_width: 100%
cards:
- type: custom:layout-card
layout: horizontal
column_width: [12.5%, auto, 12.5%, 12.5%]
column_num: 4
cards:
resulted in:
Should I use masonry, horizontal or play with a grid layout?
1 Like
Hello great community 
I come to you today for some help on an issue that is driving me crazy after reading the available documentation including https://css-tricks.com/snippets/css/complete-guide-grid/
My configuration is the following:
- type: 'custom:layout-card'
layout_type: grid
layout_options:
grid-template-columns: 5% 95%
grid-template-rows: 80% 20%
align-items: end
grid-template-areas: |
"free1 sidebar"
"free2 lixo"
cards:
[...]
- type: horizontal-stack
view_layout:
grid-area: lixo
cards:
- type: 'custom:button-card'
entity: sensor.lixo
icon: 'mdi:trash-can-outline'
name: Lixo
show_icon: true
show_name: false
styles:
card:
- width: 60px
- height: 60px
- margin: 10px
- margin-bottom: 1px
- margin-top: 1px
- border-radius: 15px
- border-width: 1px
- border-style: solid
- border-color: var(--primary-background-color)
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action: none
- type: markdown
content: |
# {{ states('sensor.lixo') }}
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
height: 20px;
margin-top: 1px;
margin-bottom: 1px;
}
ha-markdown:
$: |
h1 {
font-size: 15px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
The issue is that I cant seem to bring the trash can card to the bottom of the ācellā:
It seems I cant get the āalign-itemsā to work.
Has anyone used this configuration?
Thank you in advance.
align-items is not supported, but place-items which combines align-items and justify-items is.
1 Like
Thank you very much for the quick reply.
I have applied it but does not seem to be taking any effect, can you please confirm if my usage is correct?
- type: 'custom:layout-card'
layout_type: grid
layout_options:
grid-template-columns: 5% 95%
grid-template-rows: 80% 20%
#align-items: end
place-items: end end
grid-template-areas: |
"free1 sidebar"
"free2 lixo"
cards:
Also doesnāt appear in the console:
I made a mistake when releasing 2.2.3 two days ago.
If you have 2.2.3 installed, try removing it and reinstalling.
Even if it seems to work?
(I have 2.2.3 and it seems fine here)
Amazing!
It works!!
Thank you very much and again, thank you for everything you do for the community.
Final screenshot for confirmation 
this works for me:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 70% 1fr
grid-template-rows: 1fr
Edit: not working in the phone app
Hi guys,
I have a new issue and Iām not sure if its with this card, apex-charts or mod-card. So, apologies in advance if this is the wrong forum.
Let me explain
When I use view_layout with apex-charts I get this error:
With this code:
- type: 'custom:layout-card'
layout_type: grid
layout:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-rows: 1fr 1fr
#grid-template-areas: |
# "sidebarleft . sidebarright"
# "sidebarleft main sidebarright"
# "sidebarleft . sidebarright"
cards:
- type: 'custom:apexcharts-card'
view_layout:
#grid-area: center
grid-column: 1 / 4
grid-row: 1 / 1
apex_config:
When I use a custom:mod-card I get this warning:
With this code:
- type: 'custom:layout-card'
layout_type: grid
layout:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-rows: 1fr 1fr
#grid-template-areas: |
# "sidebarleft . sidebarright"
# "sidebarleft main sidebarright"
# "sidebarleft . sidebarright"
cards:
- type: custom:mod-card
view_layout:
#grid-area: center
grid-column: 1 / 4
grid-row: 1 / 1
card:
type: 'custom:apexcharts-card'
apex_config:
legend:
show: false
Iād say thatās the apexchart card being a bit too picky about itās configurationā¦
Good try for a workaround, but Iād suggest using a stack card instead of mod-card for that.
@RomRider https://github.com/home-assistant/frontend/blob/c269c8fd3fa9f765b1926e0f7055342690595d2d/src/data/lovelace.ts#L109
(and https://github.com/home-assistant/frontend/pull/8714)
2 Likes
Yep
Got rid of the errors and warnings with that approach
Thank you very much once again!
Yep, Iāll need to update that.
However, in the meantime, thereās an option in apexcharts to disable the config-check 
See here
type: custom:apexcharts-card
experimental:
disable_config_validation: true
2 Likes
Canāt find whatās causing this extra padding in the one row 2.2.3 layout-card at the top. Itās in a vertical-stack with grid, picture-elements, stack-in-card sections below which all align.
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 33% 1fr
Thatās weird.
Try taking a look at it with your browsers object inspector. Maybe you can find whatās in the gap.
To simplify, I stripped it down to 2 entities in an empty tab but my mojo is weak and I donāt know enough to see a problem. Couldnāt even figure out how to cut and paste, but here 'tis:
How can you justify to the left of the screen in horizontal-layout ?
This card is nice. It made it a lot easier for me to convert an existing dashboard into a single vertical column for my mobile dashboards instead of having to edit the raw configuration to add the vertical-stack card. It is also easier to edit the cards in the stack compared to the mobile dashboards that I already had with the vertical-stack card which I have now converted to layout-card with a single vertical columns.
Hi,
unfortunately i used layout card in different ways in a lot of different views. Now I have a lot of work todo with the update. Mostly i get it working, but with some special points iām confused and I need some further testing. But one simple thing i canāt figure out what is wrong. I hope you can help me with the āmain allignmentā:
The allignment of the complete layout-card is left and I canāt figure out how to center it. Also if i set panel to false it is not centered (with āpanel: falseā itās a little bit right of the center).
Here is a screenshot and the relevant part of the code (I deleted style-, elements- and card-content for better readability):
EDIT: I changed it now to vertical-layout (which seems to work good in this case, but i think i will get the same allignment issue with other cards where i definetly need the grid layout. Therefore I still need your help)
title: vacuum_new
panel: true
background: center / cover no-repeat url("/local/background/white_03.jpg") fixed
icon: mdi:robot-vacuum
cards:
- type: custom:layout-card
layout_type: grid-layout
layout:
grid-template-columns: 510px 495px
grid-template-rows: 119px 98px auto auto auto
cards:
####################################################################
- type: picture-elements
view_layout:
grid-column: 1 / 2
grid-row: 1 / 2
style: |
# DELETED
image: /local/roborock/logo_background_07.png
elements:
# DELETED
####################################################################
- type: picture-elements
view_layout:
grid-column: 1 / 2
grid-row: 2 / 4
style: |
# DELETED
image: /local/roborock/vacuum_plan_09.png
elements:
# DELETED
####################################################################
- type: picture-elements
view_layout:
grid-column: 1 / 2
grid-row: 4 / 5
style: |
# DELETED
image: /local/roborock/Roborock_view_15.png
elements:
# DELETED
####################################################################
- type: picture-elements
view_layout:
grid-column: 2 / 3
grid-row: 1 / 3
style: |
# DELETED
image: /local/roborock/remote_background_06.png
elements:
# DELETED
####################################################################
- type: horizontal-stack
view_layout:
grid-column: 2 / 3
grid-row: 3 / 6
cards:
# DELETED
3 Likes
