Somehow I cannot get card to work after recent updates 
I want to have header across entire top row and bottom row split between graph and statistics areas.
Here is the code using explicit placement of cards within grid:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 70% 30%
grid-template-rows: 40% 60%
cards:
- type: markdown
grid-column: 1/3
grid-row: 1/2
content: HEADER
- type: markdown
grid-column: 1/2
grid-row: 2/3
content: GRAPH
- type: markdown
grid-column: 2/3
grid-row: 2/3
content: STATS
And here I tried to use named areas:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 70% 30%
grid-template-rows: 40% 60%
grid-template-areas: |
"header header"
"graph stats"
cards:
- type: markdown
grid-area: header
content: HEADER
- type: markdown
grid-area: graph
content: GRAPH
- type: markdown
grid-area: stats
content: STATS
In both cases I have the same result, as if card used horizontal layout, placing cards horizontaly one by one, as they apperar in config and then overflowing to second row. Grid is created properly with right columns and rows width/height. Only placementof cards within is not workiing as intended:
What am I doing wrong?
EDIT: I found the solution, I was using grid_area wrong… to properly assign area to card following code should be used:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 70% 30%
grid-template-rows: 40% 60%
grid-template-areas: |
"header header"
"graph stats"
cards:
- type: markdown
view_layout:
grid-area: header
content: HEADER
- type: markdown
view_layout:
grid-area: graph
content: GRAPH
- type: markdown
view_layout:
grid-area: stats
content: STATS