Love the new grid card, and have already replaced most of my horizontal and vertical stacks with it, but would also love to be able to span a card over multiple columns and/or rows. Can see lots of uses.
yeah, I am trying to get my HACS thermostat in and its too big for the grids.
Great start but Im sure that will be in 0.119
is it in yet? i tried to find this but alas
nothing yet but 2021.1 is out on Wednesday, so if you have a look at the beta. That will tell you.
Any update on this a year later?
This would still be really useful!
Tripped over this myself, it would make things much more flexible. The Alternative would be a column width option that would allow a column to sized.
Is there a solution for this yet?
Not sure if I understand properly, but I believe it is already implemented long time ago. For example you can define your grid layout this way:
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%
grid-template-rows: auto auto auto
grid-template-areas: |
"wan wan devices devices agh agh"
"router-h router-h router-h router-h router-h router-h"
"ap-f ap-f ap-f ap-g ap-g ap-g"
and this allows to span single card across grid cells that use the same name. Here is screenshot of my dashboard using code above (only horizontal span in this case, but it can be also used for vertical):
5 Likes
Hi mirekmal,
probably some stupid questions but:
- Where do you put the code as shown?
- In the code-editor of the dashboard or as a theme?
- Can it be used for one single card too or will it be applicable for the complete dashboard?
- Where do you put the code as shown?
Directly into the card. - In the code-editor of the dashboard or as a theme?
As stated, it should go to the card. However depending of dashboard layout you will get different results. If using standard layout (like Masonry) you will get this as one of card, with all related grid subdivisions inside (so it could be used to display very tiny elements). If dashboard is set to panel mode, the only one card is displayed and is taking over entire screen real estate - this is what I did with dashboard on screenshot. - Can it be used for one single card too or will it be applicable for the complete dashboard?
As explained above - it is always single card, but can be used in different ways, also including complete dashboard.
I see potential 2 problems:
- have you installed layout card from HACS? It is cutom componenyt, not available out of the box.
- additionally you need to specify your card to be used in the grid, e.g. for each area you should have some other card included in the config. Take a look at sample below (stripped down version, but should show what I mean), I tried to add some comments to explain different sections use:
type: custom:layout-card # Here you specifi type of card
layout_type: grid # Type of layout to be used
layout_options: # here comes specific grid layout definition
grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%
grid-template-rows: auto auto auto
grid-template-areas: |
"wan wan devices devices agh agh"
"router-h router-h router-h router-h router-h router-h"
"ap-f ap-f ap-f ap-g ap-g ap-g"
cards: # And here goes cads to used within layout-card
- type: custom:vertical-stack-in-card # the very first card, I'm using stack card
view_layout: # here you define the are where in the grid this specific card will be placed
grid-area: router-h # in this case it is cell named router-h - exactly as defined in grid layout above
cards: # and here comes cards to be displayed within stack card
- type: custom:text-divider-row
text: ROUTER
- type: markdown
content: >
<ha-icon icon="mdi:information-variant"></ha-icon> Model: {{
states('sensor.draytek_model') }}
- type: custom:vertical-stack-in-card # next card to be placed within grid
view_layout:
grid-area: ap-f # this time to be placed within cell named ap-f
.....
# and so on...
Hi mirekmal,
Thanks for the help so far. I do have hacs. I have the card_mod.js file:
And I have added the resource:
But still the error Custom element doesnt exist : layout-card.
What could I do?
For all charts on this dashboard (but AdGuard), I use custom:apexcharts-card. The AdGuard chart is custom:mini-graph-card
Problem is that this will create a column with 6 separate small columns and place the cards in those, not cards spanning more than one of the default columns. This how-to is not working.
Nope, this indeed wil create a grid with 6 cells (across 6 columns), but card that is destined to be placed within grid cells having the same name will span across these cells. This will work properly as long as you take care about not messing with cells naming across rows/columns. Here is example of properly named cells:
a a b
a a c
d e e
And here messed up:
a a b
a c c
d e e
In second example cell named ‘a’ is not properly spread across same number of colums and all rows, wchich will result in not placing the card properly.
Screenshot I posted few post above is made from dashboard using exactly this code and as you can see it works perfectly fine.
EDIT: have you added placement statement to your card? Missing this also might cause symptom like you described (line 2 and 3 in code below):
type: custom:vertical-stack-in-card
view_layout:
grid-area: router-h
cards:
- type: custom:text-divider-row
text: ROUTER
- . . .
- . . .
OK thanks 
I will give that a try. At my age, maybe I should put on my glasses from time to time 
Your metrics layout and style is awesome! Mind sharing the YAML for it?