sebbaT
May 3, 2025, 8:47am
870
Have a play with this and see if itās what you are looking for.
- title: 4x6
path: 4x6
panel: true
type: custom:grid-layout
layout:
place-items: stretch stretch
margin: 0 auto
card_margin: 0
grid-template-columns: repeat(4, 1fr)
grid-template-rows: repeat(6, 1fr)
gap: 5px
height: 100dvh
masonry-view-card-margin: 0
icon: mdi:ab-testing
badges: []
cards:
- type: custom:button-card
name: 1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 2
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 3
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 4
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 5
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 6
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 7
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 8
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 9
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 10
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 11
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 12
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 13
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 14
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 15
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 16
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 17
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 18
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 19
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 20
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 21
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 22
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 23
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
- type: custom:button-card
name: 24
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: green
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
I am building a scheduling page for a HVAC system and I have run into two issues. The first is the layout-card and the second is formatting a date/time helper entity. In the example, I use three helpers: fan on time, fan on speed and fan off time and I would like to display them as follows:
The yaml looks as follows:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: 0px
padding: 0px
grid-gap: 0px
grid-template-columns: 80px 40px 250px 100px 300px
grid-template-rows: 80px 80px
cards:
- type: markdown
content: On at
text_only: true
view_layout:
grid-column-start: 2
grid-column-end: 3
grid-row-start: 1
grid-row-end: 1
- type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
--ha-card-background: transparent;
}
entities:
- entity: input_datetime.fan_on
icon: mdi:none
name: " "
state_color: false
show_header_toggle: false
view_layout:
grid-column-start: 3
grid-column-end: 4
grid-row-start: 1
grid-row-end: 1
- type: markdown
content: at speed
view_layout:
grid-column-start: 4
grid-column-end: 5
grid-row-start: 1
grid-row-end: 1
text_only: true
- type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
--ha-card-background: transparent;
}
entities:
- entity: input_select.fan_speed
icon: mdi:none
name: " "
view_layout:
grid-column-start: 5
grid-column-end: 6
grid-row-start: 1
grid-row-end: 1
- type: markdown
content: Off at
view_layout:
grid-column-start: 2
grid-column-end: 3
grid-row-start: 2
grid-row-end: 2
text_only: true
- type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
--ha-card-background: transparent;
justify-self: start;
}
entities:
- entity: input_datetime.fan_off
icon: mdi:none
name: " "
view_layout:
grid-column-start: 3
grid-column-end: 4
grid-row-start: 2
grid-row-end: 2
- show_name: false
show_icon: true
type: button
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
--ha-card-background: transparent;
}
entity: input_boolean.fake_entity
icon: mdi:fan-clock
show_state: false
icon_height: 80px
view_layout:
grid-column-start: 1
grid-column-end: 2
grid-row-start: 1
grid-row: span 2
But I get this:
To make the formatting problem a bit clearer, I left the borders around the entities in the second screen capture.
The two problems I canāt solve, are:
I just canāt get the large gaps between the entities in the layout-card to zero.
The entities cards donāt donāt play nice with the helpers and even though I suppress the name and icon, the helper entities just donāt want to align with the content aligned to the left and without huge gaps on the top.
I have tried with other cards, but the layout-card comes closest to what I would like to achieve (except those huge gaps). I use the helpers because I donāt want a more-info popup and I can get all the settings before doing the service call.
Can someone please help me with this? I would really appreciate it.
lcsiew
June 1, 2025, 6:56am
874
hi guys, may i know if it is possible to reduce the gap between cards to 0 in the grid layout? i used grid-gap: 0px and this is the minimum i can get. The gap will increase though if i increase the grid-gap value.
type: custom:layout-card
layout_type: custom:grid-layout
view_layout:
grid-area: main
show:
mediaquery: "(min-width: 755px)"
layout:
grid-template-columns: repeat(auto-fit, minmax(230px, max-content))
place-content: center
margin: 0px
# padding: 0px 0px 0px 0px
grid-gap: 0px
Unfortunately, grid-gap cannot be a negative value. You could shift the cards individually with card_mod and a negative margin setting.
1 Like
Does anybody know how to get a border around a layout-card? I think it is not an actual card, so card-mod doesnāt work.
Itād be nice to group cards together with layout-card and give the group a border (and possibly its own background).
I took a look at your code from your previous post and you have a real estate issue. What dashboard type are you using this with?
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 20% 45% 40%
cards:
- type: markdown
content: On at
text_only: true
card_mod:
style: |
ha-card {
width: 30px;
top: 20px;
box-shadow: none;
border: none;
background: transparent;
}
- type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
background: transparent;
}
entities:
- entity: input_datetime.test
icon: mdi:none
name: " "
state_color: false
show_header_toggle: false
- type: markdown
content: at speed
card_mod:
style: |
ha-card {
width: 90px;
left: 10px;
top: 20px;
box-shadow: none;
border: none;
background: transparent;
}
Using type: custom:mod-card is one method
type: custom:mod-card
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
cards:
- type: entities
entities:
- entity: xxxxxx
card_mod:
style: |
ha-card {
border: 2px solid red;}
VietNgoc
June 6, 2025, 3:33am
880
type: custom:mod-card
style:
layout-card$:
grid-layout$:
.: |
#root > * {
margin: 0px !important;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(auto-fit, minmax(230px, max-content))
place-content: center
margin: 0
cards:
1 Like
Great solution!!
At times, I forget how useful the custom:mod-card can be. I do limit the use of it though.
Thank you @LiQuid_cOOled . That helped a lot and I have made good progress. The hardest part is done. The input-select entity font is still red. This was to help me find the selector that formats it. The only bit left is to get all the text from all the bits to be the same font, font size and color. And to get it aligned. And maybe to remove the lines under the input_datetime.
For the sake of someone searching for this, the icon and name for both the input_datetime and input_select entities are suppressed.
I will post the yaml when it is done so it can help someone else.
The yaml is huge and inefficient. There is probably a better way to do it, but here goes:
type: custom:mod-card
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 60px 235px 80px 150px
cards:
- type: markdown
content: On at
text_only: true
card_mod:
style: |
ha-card {
width: 60px;
background: red;
font-size: 16px;
top: 30px;
text-align: center;
box-shadow: none;
border: none;
background: transparent;
}
view_layout:
grid-column-start: 1
grid-column-end: 1
grid-row-start: 1
grid-row-end: 1
- type: entities
card_mod:
style: |
ha-card {
border: 0px solid green;
background: transparent !important;
box-shadow: none;
width: 235px !important;
}
entities:
- entity: input_datetime.fan_on
icon: mdi:calendar-clock-outline
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
div > div {
display: none;
}
view_layout:
grid-column-start: 2
grid-column-end: 2
grid-row-start: 1
grid-row-end: 1
- type: markdown
content: at speed
text_only: true
card_mod:
style: |
ha-card {
width: 80px;
font-size: 16px;
top: 30px;
text-align: center;
box-shadow: none;
border: none;
}
view_layout:
grid-column-start: 3
grid-column-end: 3
grid-row-start: 1
grid-row-end: 1
- type: entities
card_mod:
style: |
ha-card {
border: 0px solid green;
background: transparent !important;
box-shadow: none;
width: 150px !important;
top: 1px !important;
}
entities:
- entity: input_select.fan_speed
card_mod:
style:
ha-select $: |
span#label {
display: none;
}
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
span.mdc-select__selected-text {
color: red !important;
}
state.card-content {
color: red;
}
hui-generic-entity-row $: |
state-badge {
display: none;
}
:host {
--mdc-menu-item-height: 18px;
font-size: 20px !important;
margin-top: -10px !important;
}
ha-select $ mwc-menu $: |
mwc-list {
max-height: 58px;
}
card_mod:
style: |
ha-card {
width:550px;
border: 2px solid red;}
kenmyh
June 16, 2025, 5:34am
883
I have some issues which Iām not sure if comes from this card or another. I try to make some room cards, and when I use layout-card the button cards gets bigger than the screen on my phone, but when I use regular grid, it stays within the frames. Any tips? Iām not using any themes.
Code for the first room cards:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Home
- square: false
type: grid
cards:
- type: custom:button-card
name: Entre
icon: mdi:door
entity: sensor.bevegelse_entre_air_temperature
show_state: true
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:spotlight-beam
entity: light.taklys_entre
card_mod:
style: |
ha-card {
--chip-background:red
padding: 5px!important;
border-radius: 100px!important;
margin: 0 0 20px 20px
}
- type: template
tap_action:
action: toggle
icon: mdi:spotlight-beam
entity: light.taklys_entre
card_mod:
style: |
ha-card {
--chip-background:red
padding: 5px!important;
border-radius: 100px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:spotlight-beam
entity: light.taklys_entre
card_mod:
style: |
ha-card {
--chip-background:red
padding: 5px!important;
border-radius: 100px!important;
}
styles:
grid:
- grid-template-areas: "\"n btn\" \"s btn\" \"i btn\""
- grid-template-columns: 1fr min-content;
- grid-template-rows: min-content min-content 1fr;
img_cell:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
- background: red
- border-radius: 200px
icon:
- width: 60px
- color: black
- opacity: "0.6"
card:
- padding: 22px
custom_fields:
btn:
- justify-content: end
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: white
state:
- justify-self: start
- align-self: start
- font-size: 14px
- opacity: "0.7"
- color: white
- type: custom:button-card
name: Entre
icon: mdi:door
entity: sensor.bevegelse_entre_air_temperature
show_state: true
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:spotlight-beam
entity: light.taklys_entre
card_mod:
style: |
ha-card {
--chip-background:red
padding: 5px!important;
border-radius: 100px!important;
margin: 0 0 20px 20px
}
- type: template
tap_action:
action: toggle
icon: mdi:spotlight-beam
entity: light.taklys_entre
card_mod:
style: |
ha-card {
--chip-background:red
padding: 5px!important;
border-radius: 100px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:spotlight-beam
entity: light.taklys_entre
card_mod:
style: |
ha-card {
--chip-background:red
padding: 5px!important;
border-radius: 100px!important;
}
styles:
grid:
- grid-template-areas: "\"n btn\" \"s btn\" \"i btn\""
- grid-template-columns: 1fr min-content;
- grid-template-rows: min-content min-content 1fr;
img_cell:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
- background: red
- border-radius: 200px
icon:
- width: 60px
- color: black
- opacity: "0.6"
card:
- padding: 22px
custom_fields:
btn:
- justify-content: end
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: white
state:
- justify-self: start
- align-self: start
- font-size: 14px
- opacity: "0.7"
- color: white
columns: 2
Code for the last ones with problems:
type: vertical-stack
cards:
- square: false
type: grid
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:button-card
icon: mdi:door
name: Entre
view_layout:
grid-area: entre
custom_fields:
temp: |
[[[
var temp = states['sensor.bevegelse_entre_air_temperature'].state;
var bat = states['sensor.bevegelse_entre_battery_level'].state;
return `
${parseFloat(temp).toFixed(0)}Ā°
<span style="font-size:14px;font-weight:400;opacity:0.6">
${parseFloat(bat).toFixed(0)}%
</span>
`
]]]
motion:
card:
type: custom:mushroom-template-card
icon: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
mdi:motion-sensor
{% else %}
{% endif %}
icon_color: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
blue
{% else %}
{% endif %}
card_mod:
style: |
:host {
--mush-icon-symbol-size: 20px
}
ha-card {
--ha-card-border-width: 0;
}
styles:
card:
- padding: 8px
- height: 100%
- border-radius: 36px 36px 6px 36px
grid:
- grid-template-areas: |
"n i"
"temp motion"
- grid-template-rows: 1fr min-content
- grid-template-columns: min-content 1fr
img_cell:
- justify-self: end
- align-self: start
- background: green
- border-radius: 100%
- width: 60px
- height: 60px
icon:
- width: 40px
- color: black
name:
- justify-self: start
- align-self: start
- font-size: 16px
- font-weight: 500
- color: white
- padding: 14px
custom_fields:
temp:
- justify-self: start
- font-size: 40px
- line-height: 40px
- font-weight: 300
- color: white
- padding: 0 0 6px 14px
motion:
- justify-self: end
- padding: 0 0 6px 0
- type: custom:button-card
icon: mdi:door
name: Kontor
view_layout:
grid-area: kontor
custom_fields:
temp: |
[[[
var temp = states['sensor.bevegelse_entre_air_temperature'].state;
var bat = states['sensor.bevegelse_entre_battery_level'].state;
return `
${parseFloat(temp).toFixed(0)}Ā°
<span style="font-size:14px;font-weight:400;opacity:0.6">
${parseFloat(bat).toFixed(0)}%
</span>
`
]]]
motion:
card:
type: custom:mushroom-template-card
icon: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
mdi:motion-sensor
{% else %}
{% endif %}
icon_color: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
blue
{% else %}
{% endif %}
card_mod:
style: |
:host {
--mush-icon-symbol-size: 20px
}
ha-card {
--ha-card-border-width: 0;
}
styles:
card:
- padding: 8px
- height: 100%
- border-radius: 36px 36px 6px 36px
grid:
- grid-template-areas: |
"n i"
"temp motion"
- grid-template-rows: 1fr min-content
- grid-template-columns: min-content 1fr
img_cell:
- justify-self: end
- align-self: start
- background: green
- border-radius: 100%
- width: 60px
- height: 60px
icon:
- width: 28px
- color: black
name:
- justify-self: start
- align-self: start
- font-size: 16px
- font-weight: 500
- color: white
- padding: 14px
custom_fields:
temp:
- justify-self: start
- font-size: 40px
- line-height: 40px
- font-weight: 300
- color: white
- padding: 0 0 6px 14px
motion:
- justify-self: end
- padding: 0 0 6px 0
- type: custom:button-card
icon: mdi:door
name: Gjesterom
view_layout:
grid-area: gjest
custom_fields:
temp: |
[[[
var temp = states['sensor.bevegelse_entre_air_temperature'].state;
var bat = states['sensor.bevegelse_entre_battery_level'].state;
return `
${parseFloat(temp).toFixed(0)}Ā°
<span style="font-size:14px;font-weight:400;opacity:0.6">
${parseFloat(bat).toFixed(0)}%
</span>
`
]]]
motion:
card:
type: custom:mushroom-template-card
icon: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
mdi:motion-sensor
{% else %}
{% endif %}
icon_color: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
blue
{% else %}
{% endif %}
card_mod:
style: |
:host {
--mush-icon-symbol-size: 20px
}
ha-card {
--ha-card-border-width: 0;
}
styles:
card:
- padding: 8px
- height: 100%
- border-radius: 36px 36px 6px 36px
grid:
- grid-template-areas: |
"n i"
"temp motion"
- grid-template-rows: 1fr min-content
- grid-template-columns: min-content 1fr
img_cell:
- justify-self: end
- align-self: start
- background: green
- border-radius: 100%
- width: 60px
- height: 60px
icon:
- width: 28px
- color: black
name:
- justify-self: start
- align-self: start
- font-size: 16px
- font-weight: 500
- color: white
- padding: 14px
custom_fields:
temp:
- justify-self: start
- font-size: 40px
- line-height: 40px
- font-weight: 300
- color: white
- padding: 0 0 6px 14px
motion:
- justify-self: end
- padding: 0 0 6px 0
- type: custom:button-card
icon: mdi:door
name: Barnerom
view_layout:
grid-area: barn
custom_fields:
temp: |
[[[
var temp = states['sensor.bevegelse_entre_air_temperature'].state;
var bat = states['sensor.bevegelse_entre_battery_level'].state;
return `
${parseFloat(temp).toFixed(0)}Ā°
<span style="font-size:14px;font-weight:400;opacity:0.6">
${parseFloat(bat).toFixed(0)}%
</span>
`
]]]
motion:
card:
type: custom:mushroom-template-card
icon: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
mdi:motion-sensor
{% else %}
{% endif %}
icon_color: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
blue
{% else %}
{% endif %}
card_mod:
style: |
:host {
--mush-icon-symbol-size: 20px
}
ha-card {
--ha-card-border-width: 0;
}
styles:
card:
- padding: 8px
- height: 100%
- border-radius: 36px 36px 6px 36px
grid:
- grid-template-areas: |
"n i"
"temp motion"
- grid-template-rows: 1fr min-content
- grid-template-columns: min-content 1fr
img_cell:
- justify-self: end
- align-self: start
- background: green
- border-radius: 100%
- width: 60px
- height: 60px
icon:
- width: 28px
- color: black
name:
- justify-self: start
- align-self: start
- font-size: 16px
- font-weight: 500
- color: white
- padding: 14px
custom_fields:
temp:
- justify-self: start
- font-size: 40px
- line-height: 40px
- font-weight: 300
- color: white
- padding: 0 0 6px 14px
motion:
- justify-self: end
- padding: 0 0 6px 0
layout:
grid-template-columns: 1fr 1fr
grid-template-rows: 150px 70px 150px
grid-template-areas: |
"entre kontor"
"entre barn"
"gjest barn"
columns: 1
See picture for reference. The first two is made with grid, the last one with layout-card.
May I ask where you referenced this code? To be honest, itās kind of all over the place! to start, placing a layout card in vertical stack is not necessary with your code and you are creating grids with grids.
Try this as an example
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
cards:
- type: custom:button-card
name: Entre
icon: mdi:door
entity: sensor.living_room_humidity
show_state: true
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:spotlight-beam
entity: light.taklys_entre
card_mod:
style: |
ha-card {
--chip-background: blue;
padding: 5px !important;
border-radius: 50% !important;
}
- type: template
tap_action:
action: toggle
icon: mdi:spotlight-beam
entity: light.taklys_entre
card_mod:
style: |
ha-card {
--chip-background: maroon;
padding: 5px !important;
border-radius: 50% !important;
}
- type: template
tap_action:
action: toggle
icon: mdi:spotlight-beam
entity: light.taklys_entre
card_mod:
style: |
ha-card {
--chip-background: darkorange;
padding: 5px !important;
border-radius: 50% !important;
}
styles:
grid:
- grid-template-areas: "\"n btn\" \"s btn\" \"i btn\""
- grid-template-columns: 1fr min-content;
- grid-template-rows: min-content min-content 1fr;
img_cell:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
- background: blue
- border-radius: 200px
icon:
- width: 60px
- color: black
- opacity: "0.6"
card:
- padding: 22px
custom_fields:
btn:
- justify-content: end
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: white
state:
- justify-self: start
- align-self: start
- font-size: 14px
- opacity: "0.7"
- color: white
- type: custom:button-card
name: Entre
icon: mdi:door
entity: sensor.living_room_humidity
show_state: true
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:spotlight-beam
entity: light.taklys_entre
card_mod:
style: |
ha-card {
--chip-background: blue;
padding: 5px !important;
border-radius: 50% !important;
}
- type: template
tap_action:
action: toggle
icon: mdi:spotlight-beam
entity: light.taklys_entre
card_mod:
style: |
ha-card {
--chip-background: maroon;
padding: 5px !important;
border-radius: 50% !important;
}
- type: template
tap_action:
action: toggle
icon: mdi:spotlight-beam
entity: light.taklys_entre
card_mod:
style: |
ha-card {
--chip-background: darkorange;
padding: 5px !important;
border-radius: 50% !important;
}
styles:
grid:
- grid-template-areas: "\"n btn\" \"s btn\" \"i btn\""
- grid-template-columns: 1fr min-content;
- grid-template-rows: min-content min-content 1fr;
img_cell:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
- background: blue
- border-radius: 200px
icon:
- width: 60px
- color: black
- opacity: "0.6"
card:
- padding: 22px
custom_fields:
btn:
- justify-content: end
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: white
state:
- justify-self: start
- align-self: start
- font-size: 14px
- opacity: "0.7"
- color: white
kenmyh
June 16, 2025, 6:09am
885
The code is all over the place since Iām still trying to learn everything. Iāve mostly used just the visual part, and not the coding part.
The first set of room cards, is OK, Iām still experimenting with everything there, which is why it looks all over the place.
The bottom 4 room cards is āfinishedā except it is bigger than the screen of my phone, and I cannot understand why or find a solution to the issue.
Start smaller with one card at a time. This is a good CSS grid reference
Use the Sections dashboard to help accommodating Mobile and PC views
In addition, yuor card mod code needs ; at then end of each entry
For exampleā¦ --chip-background:red should be --chip-background: red;
That is why the Mushroom Chips werenāt aligned and colorless.
This code is way beyond the visual part and why I asked the origin
kenmyh
June 16, 2025, 6:36am
887
Yes, Iāve snipped it from here and there and put together. I learn best by coping others code and testing it out with different edits myself.
Regarding the mushroom chips not being aligned. I was aware of this, I made the code so for some testing, so that was not really a problem.
Iām glad for all the help I get
My advice is lose all the card mod code and custom button card fields for testing. Use simple cards to develop an understanding of CSS layouts, then add the complicated formats piece by piece.
Custom Button Cards are especially difficult to debug as the entities states REALLY matter. If the entities donāt exist this is what a copy and paste looks like:
This means anyone offering help has to replace all your entities with valid entities in their setup
kenmyh
June 16, 2025, 8:29am
889
Thanks for the replies! And some useful insight.
My OG question is still my new question.
Iāve tried to change the code on those with grid rather than layout, and everything stays within the width of the screen.
Please, if you have any ideas, let me know.
To be clear, you want these to be equally distributed across 2 columns and two rows, correct?
Similar to this but with different entities?
kenmyh
June 16, 2025, 12:58pm
891
LiQuid_cOOled:
To be clear, you want these to be equally distributed across 2 columns and two rows, correct?
Similar to this but with different entities?
I want them across two columns yes, and I believe four rows, to get the formation on them as in my picture. If I look at them on the computer everything seems right, but on my phone the columns are to wide to fit the screen. The rows are correct however, on the phone.
Thanks for taking your time help me out!
Test out something like this with your own entitiesā¦
type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
cards:
- type: custom:button-card
icon: mdi:door
name: 1
custom_fields:
temp: |
[[[
var temp = states['sensor.living_room_temperature'].state;
var bat = states['sensor.living_room_sensor_battery'].state;
return `
${parseFloat(temp).toFixed(0)}Ā°
<span style="font-size:14px;font-weight:400;opacity:0.6">
${parseFloat(bat).toFixed(0)}%
</span>
`
]]]
motion:
card:
type: custom:mushroom-template-card
icon: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
mdi:motion-sensor
{% else %}
{% endif %}
icon_color: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
blue
{% else %}
{% endif %}
card_mod:
style: |
:host {
--mush-icon-symbol-size: 20px
}
ha-card {
--ha-card-border-width: 0;
}
styles:
card:
- padding: 8px
- height: 100%
- border-radius: 36px 36px 6px 36px
img_cell:
- justify-self: end
- align-self: start
- background: green
- border-radius: 100%
- width: 60px
- height: 60px
icon:
- width: 40px
- color: black
name:
- justify-self: start
- align-self: start
- font-size: 16px
- font-weight: 500
- color: white
- padding: 14px
custom_fields:
temp:
- justify-self: start
- font-size: 40px
- line-height: 40px
- font-weight: 300
- color: white
- padding: 0 0 6px 14px
motion:
- justify-self: end
- padding: 0 0 6px 0
- type: custom:button-card
icon: mdi:door
name: 2
custom_fields:
temp: |
[[[
var temp = states['sensor.living_room_temperature'].state;
var bat = states['sensor.living_room_sensor_battery'].state;
return `
${parseFloat(temp).toFixed(0)}Ā°
<span style="font-size:14px;font-weight:400;opacity:0.6">
${parseFloat(bat).toFixed(0)}%
</span>
`
]]]
motion:
card:
type: custom:mushroom-template-card
icon: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
mdi:motion-sensor
{% else %}
{% endif %}
icon_color: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
blue
{% else %}
{% endif %}
card_mod:
style: |
:host {
--mush-icon-symbol-size: 20px
}
ha-card {
--ha-card-border-width: 0;
}
styles:
card:
- padding: 8px
- height: 100%
- border-radius: 36px 36px 6px 36px
img_cell:
- justify-self: end
- align-self: start
- background: green
- border-radius: 100%
- width: 60px
- height: 60px
icon:
- width: 40px
- color: black
name:
- justify-self: start
- align-self: start
- font-size: 16px
- font-weight: 500
- color: white
- padding: 14px
custom_fields:
temp:
- justify-self: start
- font-size: 40px
- line-height: 40px
- font-weight: 300
- color: white
- padding: 0 0 6px 14px
motion:
- justify-self: end
- padding: 0 0 6px 0
- type: custom:button-card
icon: mdi:door
name: 3
custom_fields:
temp: |
[[[
var temp = states['sensor.living_room_temperature'].state;
var bat = states['sensor.living_room_sensor_battery'].state;
return `
${parseFloat(temp).toFixed(0)}Ā°
<span style="font-size:14px;font-weight:400;opacity:0.6">
${parseFloat(bat).toFixed(0)}%
</span>
`
]]]
motion:
card:
type: custom:mushroom-template-card
icon: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
mdi:motion-sensor
{% else %}
{% endif %}
icon_color: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
blue
{% else %}
{% endif %}
card_mod:
style: |
:host {
--mush-icon-symbol-size: 20px
}
ha-card {
--ha-card-border-width: 0;
}
styles:
card:
- padding: 8px
- height: 100%
- border-radius: 36px 36px 6px 36px
img_cell:
- justify-self: end
- align-self: start
- background: green
- border-radius: 100%
- width: 60px
- height: 60px
icon:
- width: 40px
- color: black
name:
- justify-self: start
- align-self: start
- font-size: 16px
- font-weight: 500
- color: white
- padding: 14px
custom_fields:
temp:
- justify-self: start
- font-size: 40px
- line-height: 40px
- font-weight: 300
- color: white
- padding: 0 0 6px 14px
motion:
- justify-self: end
- padding: 0 0 6px 0
- type: custom:button-card
icon: mdi:door
name: 4
custom_fields:
temp: |
[[[
var temp = states['sensor.living_room_temperature'].state;
var bat = states['sensor.living_room_sensor_battery'].state;
return `
${parseFloat(temp).toFixed(0)}Ā°
<span style="font-size:14px;font-weight:400;opacity:0.6">
${parseFloat(bat).toFixed(0)}%
</span>
`
]]]
motion:
card:
type: custom:mushroom-template-card
icon: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
mdi:motion-sensor
{% else %}
{% endif %}
icon_color: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
blue
{% else %}
{% endif %}
card_mod:
style: |
ha-card {
border: none;
}
styles:
card:
- padding: 8px
- height: 100%
- border-radius: 36px 36px 6px 36px
img_cell:
- justify-self: end
- align-self: start
- background: green
- border-radius: 100%
- width: 60px
- height: 60px
icon:
- width: 40px
- color: black
name:
- justify-self: start
- align-self: start
- font-size: 16px
- font-weight: 500
- color: white
- padding: 14px
custom_fields:
temp:
- justify-self: start
- font-size: 40px
- line-height: 40px
- font-weight: 300
- color: white
- padding: 0 0 6px 14px
motion:
- justify-self: end
- padding: 0 0 6px 0
- type: custom:button-card
icon: mdi:door
name: 5
custom_fields:
temp: |
[[[
var temp = states['sensor.living_room_temperature'].state;
var bat = states['sensor.living_room_sensor_battery'].state;
return `
${parseFloat(temp).toFixed(0)}Ā°
<span style="font-size:14px;font-weight:400;opacity:0.6">
${parseFloat(bat).toFixed(0)}%
</span>
`
]]]
motion:
card:
type: custom:mushroom-template-card
icon: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
mdi:motion-sensor
{% else %}
{% endif %}
icon_color: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
blue
{% else %}
{% endif %}
card_mod:
style: |
:host {
--mush-icon-symbol-size: 20px
}
ha-card {
--ha-card-border-width: 0;
}
styles:
card:
- padding: 8px
- height: 100%
- border-radius: 36px 36px 6px 36px
img_cell:
- justify-self: end
- align-self: start
- background: green
- border-radius: 100%
- width: 60px
- height: 60px
icon:
- width: 40px
- color: black
name:
- justify-self: start
- align-self: start
- font-size: 16px
- font-weight: 500
- color: white
- padding: 14px
custom_fields:
temp:
- justify-self: start
- font-size: 40px
- line-height: 40px
- font-weight: 300
- color: white
- padding: 0 0 6px 14px
motion:
- justify-self: end
- padding: 0 0 6px 0
- type: custom:button-card
icon: mdi:door
name: 6
custom_fields:
temp: |
[[[
var temp = states['sensor.living_room_temperature'].state;
var bat = states['sensor.living_room_sensor_battery'].state;
return `
${parseFloat(temp).toFixed(0)}Ā°
<span style="font-size:14px;font-weight:400;opacity:0.6">
${parseFloat(bat).toFixed(0)}%
</span>
`
]]]
motion:
card:
type: custom:mushroom-template-card
icon: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
mdi:motion-sensor
{% else %}
{% endif %}
icon_color: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
blue
{% else %}
{% endif %}
card_mod:
style: |
:host {
--mush-icon-symbol-size: 20px
}
ha-card {
--ha-card-border-width: 0;
}
styles:
card:
- padding: 8px
- height: 100%
- border-radius: 36px 36px 6px 36px
img_cell:
- justify-self: end
- align-self: start
- background: green
- border-radius: 100%
- width: 60px
- height: 60px
icon:
- width: 40px
- color: black
name:
- justify-self: start
- align-self: start
- font-size: 16px
- font-weight: 500
- color: white
- padding: 14px
custom_fields:
temp:
- justify-self: start
- font-size: 40px
- line-height: 40px
- font-weight: 300
- color: white
- padding: 0 0 6px 14px
motion:
- justify-self: end
- padding: 0 0 6px 0
- type: custom:button-card
icon: mdi:door
name: 7
custom_fields:
temp: |
[[[
var temp = states['sensor.living_room_temperature'].state;
var bat = states['sensor.living_room_sensor_battery'].state;
return `
${parseFloat(temp).toFixed(0)}Ā°
<span style="font-size:14px;font-weight:400;opacity:0.6">
${parseFloat(bat).toFixed(0)}%
</span>
`
]]]
motion:
card:
type: custom:mushroom-template-card
icon: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
mdi:motion-sensor
{% else %}
{% endif %}
icon_color: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
blue
{% else %}
{% endif %}
card_mod:
style: |
:host {
--mush-icon-symbol-size: 20px
}
ha-card {
--ha-card-border-width: 0;
}
styles:
card:
- padding: 8px
- height: 100%
- border-radius: 36px 36px 6px 36px
img_cell:
- justify-self: end
- align-self: start
- background: green
- border-radius: 100%
- width: 60px
- height: 60px
icon:
- width: 40px
- color: black
name:
- justify-self: start
- align-self: start
- font-size: 16px
- font-weight: 500
- color: white
- padding: 14px
custom_fields:
temp:
- justify-self: start
- font-size: 40px
- line-height: 40px
- font-weight: 300
- color: white
- padding: 0 0 6px 14px
motion:
- justify-self: end
- padding: 0 0 6px 0
- type: custom:button-card
icon: mdi:door
name: 8
custom_fields:
temp: |
[[[
var temp = states['sensor.living_room_temperature'].state;
var bat = states['sensor.living_room_sensor_battery'].state;
return `
${parseFloat(temp).toFixed(0)}Ā°
<span style="font-size:14px;font-weight:400;opacity:0.6">
${parseFloat(bat).toFixed(0)}%
</span>
`
]]]
motion:
card:
type: custom:mushroom-template-card
icon: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
mdi:motion-sensor
{% else %}
{% endif %}
icon_color: >
{% set
state=states('binary_sensor.bevegelse_entre_motion_detection')
%}
{% if state=='on' %}
blue
{% else %}
{% endif %}
card_mod:
style: |
ha-card {
border: none;
}
styles:
card:
- padding: 8px
- height: 100%
- border-radius: 36px 36px 6px 36px
img_cell:
- justify-self: end
- align-self: start
- background: green
- border-radius: 100%
- width: 60px
- height: 60px
icon:
- width: 40px
- color: black
name:
- justify-self: start
- align-self: start
- font-size: 16px
- font-weight: 500
- color: white
- padding: 14px
custom_fields:
temp:
- justify-self: start
- font-size: 40px
- line-height: 40px
- font-weight: 300
- color: white
- padding: 0 0 6px 14px
motion:
- justify-self: end
- padding: 0 0 6px 0
card_mod:
style: |
ha-card {
border: none;
background: none;}
