Hi all, I’m hoping somebody can help me with the custom grid on a dashboard.
my dashboard needs to be 1334px x 800px for my tablet so i’ve worked out the dimensions for each card and the grid gap required, my dimensions are on the attached image.
I am using Grid (layout-card) with custom:layout-card
My current full yaml is below but I can’t seem to get a consistent 20px gap between cards and 25px gap on the outside. how can i create a grid exactly as my image (I’ve not even attempted the 310 x 310 card yet)?
kiosk_mode:
hide_sidebar: '{{ is_state("input_boolean.kiosk_mode", "on") }}'
hide_header: '{{ is_state("input_boolean.kiosk_mode", "on") }}'
non_admin_settings:
kiosk: true
button_card_templates:
mini_toggle:
type: custom:button-card
show_name: false
tap_action:
action: toggle
state:
- value: 'on'
styles:
card:
- background-color: var(--selected-yellow)
- value: 'off'
styles:
card:
- background-color: rgba(96,114,116,0.2)
styles:
card:
- padding: 11px
- width: 46px
- height: 46px
- border-radius: 99px
- box-shadow: none
icon:
- width: 25px
- color: var(--primary-color)
room_card:
type: custom:button-card
section_mode: true
grid_options:
rows: 3
columns: 9
show_state: true
state_display: |
[[[
const tEnt = variables.temp_entity ? states[variables.temp_entity] : null;
const hEnt = variables.humidity_entity ? states[variables.humidity_entity] : null;
const temp = tEnt ? Math.round(parseFloat(tEnt.state)) : '—';
const hum = hEnt ? Math.round(parseFloat(hEnt.state)) : null;
return hum ? `${temp}°C • ${hum}%` : `${temp}°C`;
]]]
styles:
grid:
- grid-template-areas: '"n btn_group" "s btn_group" "i btn_group"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- width: 310px
- height: 200px
- padding: 20px
custom_fields:
btn_group:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 19px
- font-weight: 600
- color: var(--primary-color)
state:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 15px
- font-weight: 500
- color: rgba(96,114,116,0.7)
img_cell:
- justify-content: center
- align-items: center
- position: absolute
- width: 120px
- height: 120px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: var(--living-room-yellow)
- border-radius: 500px
icon:
- width: 60px
- color: black
- opacity: '0.5'
custom_fields:
btn_group:
card:
type: horizontal-stack
cards: |
[[[
if (variables.btn_group && variables.btn_group.length) {
return variables.btn_group;
} else {
return [
{
type: "custom:button-card",
show_name: false,
show_icon: false,
styles: {
card: [
"box-shadow: none",
"background: none",
"width: 0",
"height: 0",
"padding: 0",
"margin: 0"
]
}
}
];
}
]]]
views:
- title: Home Overview
type: custom:grid-layout
layout:
grid-template-columns: 319px 1fr
grid-template-areas: |
"sidebar main"
grid-gap: 20px
margin: 20px
mediaquery:
'(max-width: 319px)':
grid-template-columns: 1fr
grid-template-areas: |
"sidebar"
"main"
cards:
- type: custom:stack-in-card
cards:
- type: custom:digital-clock
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.met_office_wokingham
forecast_type: daily
- type: entities
title: Quick Info
show_header_toggle: false
entities:
- entity: sensor.total_lights_count_template
name: Lights On
- entity: sensor.met_office_wokingham_temperature
name: Outside Temperature
- entity: sensor.av_receiver_energy_2
name: Energy Today
view_layout:
grid-area: sidebar
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
}
- type: vertical-stack
view_layout:
grid-area: main
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: repeat(3, 310px)
grid-auto-rows: 200px
grid-gap: 20px
justify-content: start
cards:
- type: custom:button-card
template: room_card
name: Master
icon: mdi:bed-king
tap_action:
action: navigate
navigation_path: '#livingroom'
variables:
temp_entity: >-
sensor.master_bedroom_temperature_and_humidity_sensor_temperature
humidity_entity: >-
sensor.master_bedroom_temperature_and_humidity_sensor_humidity
btn_group:
- type: vertical-stack
cards:
- type: custom:button-card
template: mini_toggle
entity: light.master_bedroom_lamps
icon: mdi:lamps
- type: custom:button-card
template: mini_toggle
entity: switch.tablet_charger
icon: mdi:tablet
- type: custom:button-card
template: mini_toggle
entity: media_player.master_bedroom_speaker
icon: mdi:speaker
- type: custom:button-card
template: room_card
name: Trudi
icon: mdi:bed
variables:
temp_entity: >-
sensor.trudi_bedroom_temperature_and_humidity_sensor_temperature
humidity_entity: >-
sensor.trudi_bedroom_temperature_and_humidity_sensor_humidity
btn_group:
- type: vertical-stack
cards:
- type: custom:button-card
template: mini_toggle
entity: light.trudi_bedroom_light
icon: mdi:ceiling-light
- type: custom:button-card
template: mini_toggle
entity: light.trudi_bedroom_christmas_tree
icon: mdi:pine-tree-variant
- type: custom:button-card
template: room_card
name: Living Room
icon: mdi:sofa
variables:
temp_entity: >-
sensor.living_room_temperature_and_humidity_sensor_temperature
humidity_entity: sensor.living_room_temperature_and_humidity_sensor_humidity
btn_group:
- type: vertical-stack
cards:
- type: custom:button-card
template: mini_toggle
entity: light.living_room_lamp
icon: mdi:lamp
- type: custom:button-card
template: mini_toggle
entity: media_player.shield
icon: mdi:television
- type: custom:button-card
template: mini_toggle
entity: media_player.living_room_display
icon: mdi:speaker
- type: custom:button-card
template: room_card
name: Dining Room
icon: mdi:silverware-fork-knife
variables:
temp_entity: sensor.kitchen_temperature_and_humidity_sensor_temperature
humidity_entity: sensor.kitchen_temperature_and_humidity_sensor_humidity
btn_group:
- type: vertical-stack
cards:
- type: custom:button-card
template: mini_toggle
entity: switch.dinning_room_plug
icon: mdi:power-plug
- type: custom:button-card
template: mini_toggle
entity: media_player.dining_room_speaker
icon: mdi:speaker
- type: custom:button-card
template: room_card
name: Kitchen
icon: mdi:chef-hat
variables:
temp_entity: sensor.kitchen_temperature_and_humidity_sensor_temperature
humidity_entity: sensor.kitchen_temperature_and_humidity_sensor_humidity
btn_group:
- type: vertical-stack
cards:
- type: custom:button-card
template: mini_toggle
entity: switch.dehumidifier_switch
icon: mdi:air-humidifier
- type: custom:button-card
template: room_card
name: Bathroom
icon: mdi:bathtub
variables:
temp_entity: sensor.bathroom_temperature_and_humidity_sensor_temperature
humidity_entity: sensor.bathroom_temperature_and_humidity_sensor_humidity
- type: custom:button-card
template: room_card
name: Outside
icon: mdi:flower
variables:
temp_entity: sensor.met_office_wokingham_temperature
humidity_entity: sensor.met_office_wokingham_humidity
- type: custom:button-card
template: room_card
name: Study
icon: mdi:desk
variables:
temp_entity: sensor.met_office_wokingham_temperature
humidity_entity: sensor.met_office_wokingham_humidity
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: repeat(9, 90px)
grid-auto-rows: 90px
grid-gap: 20px
justify-content: start
cards:
- type: custom:button-card
show_name: false
show_icon: true
icon: mdi:lightbulb-group
entity: sensor.total_lights_count_template
styles:
card:
- width: 90px
- height: 90px
- background-color: '#ffffba'
icon:
- color: black
- type: custom:button-card
show_name: false
show_icon: true
icon: mdi:security
entity: sensor.total_lights_count_template
styles:
card:
- width: 90px
- height: 90px
- background-color: '#bae1ff'
icon:
- color: black
- type: custom:button-card
show_name: false
show_icon: true
icon: mdi:battery
entity: sensor.total_lights_count_template
styles:
card:
- width: 90px
- height: 90px
- background-color: '#baffc9'
icon:
- color: black
- type: custom:button-card
show_name: false
show_icon: true
icon: mdi:home-automation
entity: sensor.total_lights_count_template
styles:
card:
- width: 90px
- height: 90px
- background-color: '#ffdfba'
icon:
- color: black
- type: custom:button-card
show_name: false
show_icon: true
icon: mdi:video
entity: sensor.total_lights_count_template
styles:
card:
- width: 90px
- height: 90px
- background-color: '#ffb3ba'
icon:
- color: black
- type: custom:button-card
show_name: false
show_icon: true
icon: mdi:lightning-bolt
entity: sensor.total_lights_count_template
styles:
card:
- width: 90px
- height: 90px
- background-color: '#ffb0de'
icon:
- color: black
- type: custom:button-card
show_name: false
show_icon: true
icon: mdi:lightning-bolt
entity: sensor.total_lights_count_template
styles:
card:
- width: 90px
- height: 90px
- background-color: '#ffb0de'
icon:
- color: black
- type: custom:button-card
show_name: false
show_icon: true
icon: mdi:lightning-bolt
entity: sensor.total_lights_count_template
styles:
card:
- width: 90px
- height: 90px
- background-color: '#ffb0de'
icon:
- color: black
- type: custom:button-card
show_name: false
show_icon: true
icon: mdi:lightning-bolt
entity: sensor.total_lights_count_template
styles:
card:
- width: 90px
- height: 90px
- background-color: '#ffb0de'
icon:
- color: black
theme: minimalist-mine
