Hi community,
I am trying to build my first minimalist dashboard using the grid-layout. I can however not wrap my head around this issue:
The light-card is overlapping the header and not shifting to the right grid-area
Can anybody help me along?
title: "Home"
path: "home"
type: custom:grid-layout
layout:
grid-template-columns: 33% 33% 33%
grid-template-rows: auto
grid-template-areas: |
" h1 h1 h1 "
" m1 m2 m3 "
" f1 f1 f1 "
badges: []
cards:
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: chip_navigate
label: 'Home'
variables:
ulm_chip_navigate_path: /ui-lovelace-minimalist/home
ulm_chip_navigate_icon: mdi:home
- type: "custom:button-card"
template: chip_navigate
label: 'Woonkamer'
variables:
ulm_chip_navigate_path: /ui-lovelace-minimalist/test
ulm_chip_navigate_icon: mdi:sofa-outline
ulm_chip_navigate_icon_color: pink
ulm_chip_navigate_label_color: pink
- type: "custom:button-card"
template: chip_navigate
label: 'Keuken'
variables:
ulm_chip_navigate_path: /ui-lovelace-minimalist/home
ulm_chip_navigate_icon: mdi:countertop-outline
- type: "custom:button-card"
template: chip_navigate
label: 'Buiten'
variables:
ulm_chip_navigate_path: /ui-lovelace-minimalist/home
ulm_chip_navigate_icon: mdi:flower-tulip-outline
- type: "custom:button-card"
template: chip_navigate
label: 'Kantoor'
variables:
ulm_chip_navigate_path: /ui-lovelace-minimalist/home
ulm_chip_navigate_icon: mdi:laptop
- type: "custom:button-card"
template: chip_navigate
label: 'Slaapkamer'
variables:
ulm_chip_navigate_path: /ui-lovelace-minimalist/home
ulm_chip_navigate_icon: mdi:bed-outline
- type: "custom:button-card"
template: chip_navigate
label: 'Slaapkamer Amarr'
variables:
ulm_chip_navigate_path: /ui-lovelace-minimalist/home
ulm_chip_navigate_icon: mdi:cradle-outline
- type: "custom:button-card"
template: chip_navigate
label: 'Zolder'
variables:
ulm_chip_navigate_path: /ui-lovelace-minimalist/home
ulm_chip_navigate_icon: mdi:home-roof
view-layout:
grid-area: h1
- type: custom:mushroom-light-card
entity: light.signe
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: false
name: Signe | tv staaf
icon: hue:signe
fill_container: true
view-layout:
grid-area: m3```