Hi,
Since 2.2.0, it is not possible anymore to assign two cards to the same grid-area and have them on top of one another.
Specifically, I tend to use this method to over-customize some cards, like two graph cards without the same unit or scale.
Is there a way to get the same result with this new version ?
Best regards and thanks for the awesome work !
Can’t reproduce when using view_layout instead of layout.
Quick question for those who may have already updated their grid-config.
Is there a way to define multiple mediaqueries within the mediaquery option ?
mediaquery:
"(max-width: 1300px)":
grid-template-columns: 1fr 1fr
grid-template-areas: |
"chores1 vacuum1"
"chores2 vacuum2"
"(max-width: 900px)":
grid-template-columns: 100%
grid-template-areas: |
"chores1"
"chores2"
"vacuum1"
"vacuum2"
Only the first one is triggered in this case.
Yes. Only the first match will be applied.
This example previously showed the two cards on top of each other :
type: 'custom:layout-card'
layout_type: grid
layout_options:
grid-template-columns: 250px
grid-template-rows: 250px
grid-template-areas: |
"graph"
cards:
- type: sensor
view-layout:
grid-area: graph
entity: sensor.sun_elevation
graph: line
- type: sensor
view-layout:
grid-area: graph
entity: sensor.rasp_1_temperature
graph: line
style: |
ha-card {
background: none;
}
The background for the ‘top’ card is set to none in order to see the second card which is ‘below’ it.
Now, all I get is the two cards on two separate lines, one after the other.
I hope the issue is clearer now 
view_layout, not view-layout.
Understood. Guess I’ll stick with state-switch for now.
Or just switch the order of your queries, so that the one you want to be applied is first.
This is a feature.
Ahah, why is it always the obvious that is the most difficult to spot ? 
Thanks for your quick answer !!
Oh dear here come the “I feel so stupid right now” feelings. Seriously though, this is an awesome update. My config is so much tidier now, thanks 
!
Happens to the best of us.
@thomasloven Absolutely love this new version! I was using this card previously for few of my dashboards, but the problem was to build layouts that work equaly well on large screens (like in browser on PC) and on small one (like companion app on mobile). Now, with media query option I have full control over different size layouts and this is AWESOME! Thank you so much!
Thanks, i solved it using the grid layout.
Hi, i’m going nuts here
I’ve been reading the readme over and over again
Updated to latest version and tried to adjust my yaml file so i get the same layout again without luck (i now i have to clear my cache)
This is my old code
title: Home
icon: mdi:home-outline
path: Home
type: 'custom:layout-card'
column_width: 100%
layout: horizontal
max_columns: 3
cards:
- type: custom:stack-in-card
mode: horizontal
style: |
ha-card {
background-color: transparent !important;
box-shadow: none !important;
}
cards:
- type: markdown
content: |
<font size=4>{{ states.sensor.date_short.state }}</font>
style: |
ha-card {
margin-top: 5px;
background-color: rgba(0, 0, 0, 0);
font-size: 100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-align: left;
}
- type: markdown
content: |
<font size=4>{{ states.sensor.temperature.state }}°C</font>
style: |
ha-card {
margin-top: 5px;
background-color: rgba(0, 0, 0, 0);
font-size: 100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-align: right;
}
- type: 'custom:layout-card'
layout: vertical
max_columns: 3
max_height: 96
max_width: 400
cards:
- type: markdown
content: |
<font size=6>{{ states('sensor.greeting') }}</font>
style: |
ha-card {
margin-top: 5px;
background-color: rgba(0, 0, 0, 0);
font-size: 100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-align: center;
}
h1, h3 {
font-weight: 400 !important;
}
- type: custom:swipe-card
parameters:
allowTouchMove: true
grabCursor: true
autoplay:
disableOnInteraction: false
cards:
!include ../../includes/notifications.yaml
- type: custom:layout-card
column_width: 96
layout: horizontal
max_columns: 3
max_height: 96
max_width: 130
cards:
- type: custom:button-card
entity: sensor.postbus
state:
- value: "closed"
icon: mdi:mailbox
- value: "open"
icon: mdi:mailbox-up
styles:
icon:
- color: var(--primary-color)
style: |
ha-card {
height: 96px;
text-align: center;
}
tap_action:
action: call-service
service: homeassistant.turn_off
service_data:
entity_id:
- input_boolean.brievenbus
- input_boolean.pakjesbus
- name: Alarm
type: custom:button-card
tap_action: !include popup/alarm.yaml
entity: alarm_control_panel.risco
state:
- value: "disarmed"
icon: mdi:shield-off
- value: "armed_away"
icon: mdi:shield-check
styles:
icon:
- color: var(--primary-color)
- value: "armed_home"
icon: mdi:shield-half-full
styles:
icon:
- color: var(--primary-color)
style: |
ha-card {
height: 96px;
text-align: center;
}
- name: Garagepoort
type: custom:button-card
entity: binary_sensor.garage_poort
state:
- value: "on"
icon: mdi:garage-open-variant
- value: "off"
icon: mdi:garage-variant
styles:
icon:
- color: var(--primary-text-color)
style: |
ha-card {
height: 96px;
text-align: center;
}
tap_action:
action: call-service
service: homeassistant.toggle
service_data:
entity_id: switch.garagepoort
- entity: person.stijn
type: picture-entity
image: /local/stijn.jpg
tap_action: !include popup/persoon1.yaml
style: |
ha-card {
height: 96px !important;
}
- type: picture-entity
entity: person.james
image: /local/hond.jpg
show_state: false
tap_action: !include popup/dog.yaml
style: |
ha-card {
height: 96px !important;
}
- type: picture-entity
entity: person.kim
image: /local/kim.jpg
tap_action: !include popup/persoon2.yaml
style: |
ha-card {
height: 96px !important;
}
- name: Verlichting
type: custom:button-card
icon: mdi:lightbulb-outline
tap_action: !include popup/verlichting.yaml
style: |
ha-card {
height: 96px;
}
- name: Security
type: custom:button-card
icon: mdi:cctv
tap_action: !include popup/security.yaml
style: |
ha-card {
height: 96px;
text-align: center;
}
- name: Entertainment
type: custom:button-card
icon: mdi:television-classic
tap_action: !include popup/entertainment.yaml
style: |
ha-card {
height: 96px;
--paper-item-icon-active-color: #e79118;
}
- name: Huishouden
type: custom:button-card
icon: mdi:broom
tap_action: !include popup/household.yaml
style: |
ha-card {
height: 96px;
text-align: center;
}
- name: Temperatuur
type: custom:button-card
icon: mdi:home-thermometer-outline
tap_action: !include popup/temperatuur.yaml
style: |
ha-card {
height: 96px;
text-align: center;
}
- name: Server
type: custom:button-card
icon: mdi:nas
tap_action: !include popup/server.yaml
style: |
ha-card {
height: 96px;
}
- name: Netwerk
type: custom:button-card
icon: mdi:server-network
tap_action: !include popup/network.yaml
style: |
ha-card {
height: 96px;
}
- name: Energie
type: custom:button-card
icon: mdi:power-plug
tap_action: !include popup/energie.yaml
style: |
ha-card {
height: 96px;
}
- name: Sensoren
type: custom:button-card
icon: mdi:leak
tap_action: !include popup/sensoren.yaml
style: |
ha-card {
height: 96px;
text-align: center;
}
Sorry its long
Do i have to change everything now into custom: layout-card and then layout_type: vertical (or horizontal) or do i need to change into type: custom:horizontal-layout
Any help appreciated
That used to WORK???
I had no idea!
You want type: custom:horizontal-layout and then change the layout options.
… not that three columns that are each 100% wide makes any sense… but who am I to judge.
In general, I recommend starting over - as can be reasonably expected when switching to something named “2.0”.
You’ll probably have a better end result. Try the new GUI mode!
Yeah it worked
i know the code is a bit rubbish
i can start over, gonna try
the gui mode -> i’m in yaml i cant change back and forth no?
Now all is gone…
title: Home
icon: mdi:home-outline
path: Home
type: custom:vertical-layout
view_layout:
columns: 3
cards:
- type: custom:stack-in-card
mode: horizontal
style: |
ha-card {
background-color: transparent !important;
box-shadow: none !important;
}
cards:
- type: markdown
content: |
<font size=4>{{ states.sensor.date_short.state }}</font>
style: |
ha-card {
margin-top: 5px;
background-color: rgba(0, 0, 0, 0);
font-size: 100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-align: left;
}
- type: markdown
content: |
<font size=4>{{ states.sensor.temperature.state }}°C</font>
style: |
ha-card {
margin-top: 5px;
background-color: rgba(0, 0, 0, 0);
font-size: 100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-align: right;
}
- type: custom:vertical-layout
cards:
- type: markdown
content: |
<font size=6>{{ states('sensor.greeting') }}</font>
style: |
ha-card {
margin-top: 5px;
background-color: rgba(0, 0, 0, 0);
font-size: 100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-align: center;
}
h1, h3 {
font-weight: 400 !important;
}
- type: custom:swipe-card
parameters:
allowTouchMove: true
grabCursor: true
autoplay:
disableOnInteraction: false
cards:
!include ../../includes/notifications.yaml
- type: custom:horizontal-layout
view_layout:
columns: 3
max_height: 96
max_width: 130
cards:
- type: custom:button-card
entity: sensor.postbus
state:
- value: "closed"
icon: mdi:mailbox
- value: "open"
icon: mdi:mailbox-up
styles:
icon:
- color: var(--primary-color)
style: |
ha-card {
height: 96px;
text-align: center;
}
tap_action:
action: call-service
service: homeassistant.turn_off
service_data:
entity_id:
- input_boolean.brievenbus
- input_boolean.pakjesbus
- name: Alarm
type: custom:button-card
tap_action: !include popup/alarm.yaml
entity: alarm_control_panel.risco
state:
- value: "disarmed"
icon: mdi:shield-off
- value: "armed_away"
icon: mdi:shield-check
styles:
icon:
- color: var(--primary-color)
- value: "armed_home"
icon: mdi:shield-half-full
styles:
icon:
- color: var(--primary-color)
style: |
ha-card {
height: 96px;
text-align: center;
}
- name: Garagepoort
type: custom:button-card
entity: binary_sensor.garage_poort
state:
- value: "on"
icon: mdi:garage-open-variant
- value: "off"
icon: mdi:garage-variant
styles:
icon:
- color: var(--primary-text-color)
style: |
ha-card {
height: 96px;
text-align: center;
}
tap_action:
action: call-service
service: homeassistant.toggle
service_data:
entity_id: switch.garagepoort
- type: custom:layout-break
- entity: person.stijn
type: picture-entity
image: /local/stijn.jpg
tap_action: !include popup/persoon1.yaml
style: |
ha-card {
height: 96px !important;
}
- type: picture-entity
entity: person.james
image: /local/hond.jpg
show_state: false
tap_action: !include popup/dog.yaml
style: |
ha-card {
height: 96px !important;
}
- type: picture-entity
entity: person.kim
image: /local/kim.jpg
tap_action: !include popup/persoon2.yaml
style: |
ha-card {
height: 96px !important;
}
- type: custom:layout-break
- name: Verlichting
type: custom:button-card
icon: mdi:lightbulb-outline
tap_action: !include popup/verlichting.yaml
style: |
ha-card {
height: 96px;
}
- name: Security
type: custom:button-card
icon: mdi:cctv
tap_action: !include popup/security.yaml
style: |
ha-card {
height: 96px;
text-align: center;
}
- name: Entertainment
type: custom:button-card
icon: mdi:television-classic
tap_action: !include popup/entertainment.yaml
style: |
ha-card {
height: 96px;
--paper-item-icon-active-color: #e79118;
}
- type: custom:layout-break
- name: Huishouden
type: custom:button-card
icon: mdi:broom
tap_action: !include popup/household.yaml
style: |
ha-card {
height: 96px;
text-align: center;
}
- name: Temperatuur
type: custom:button-card
icon: mdi:home-thermometer-outline
tap_action: !include popup/temperatuur.yaml
style: |
ha-card {
height: 96px;
text-align: center;
}
- name: Server
type: custom:button-card
icon: mdi:nas
tap_action: !include popup/server.yaml
style: |
ha-card {
height: 96px;
}
- type: custom:layout-break
- name: Netwerk
type: custom:button-card
icon: mdi:server-network
tap_action: !include popup/network.yaml
style: |
ha-card {
height: 96px;
}
- name: Energie
type: custom:button-card
icon: mdi:power-plug
tap_action: !include popup/energie.yaml
style: |
ha-card {
height: 96px;
}
- name: Sensoren
type: custom:button-card
icon: mdi:leak
tap_action: !include popup/sensoren.yaml
style: |
ha-card {
height: 96px;
text-align: center;
}
How do I revert back to v16? Accidentally upgraded and need to revert back, but v16 not available in HACS 
Go to Integrations > HACS, click Options. Set the value for number of releases to a higher number, eg. ten or so. Afterwards go back to HACS and try again. I’d revert the changes back after rolled back layout-card.
That did the trick, cheers!