Hi,
I want to create a new dashboard with three columns.
I started with this code:
views:
- title: Huis
path: huis
type: custom:grid-layout
layout:
grid-template-columns: 33% 10% 1fr
grid-template-areas: |
"a1 a2 a3"
"b1 b2 b3"
subview: false
theme: clear-dark
badges: []
cards:
- type: vertical-stack
cards:
- type: markdown
content: |-
<font size="10">{{ states('sensor.today_time') }}</font>
<font size="5">{{ states('sensor.today_day') }}</font>
- type: vertical-stack
cards:
- square: false
type: grid
cards:
- type: custom:button-card
color_type: card
name: Home
styles:
card:
- background: transparent
- color: white
- height: 70px
- font-size: 25px
border-radius: 50%
tap_action:
action: navigate
navigation_path: /dashboard-thuis/home
- type: custom:button-card
color_type: card
name: Verwarming
styles:
card:
- background: transparent
- color: white
- height: 70px
- font-size: 25px
border-radius: 50%
tap_action:
action: navigate
navigation_path: /dashboard-thuis/verwarming
- type: custom:button-card
color_type: card
name: Verlichting
styles:
card:
- background: transparent
- color: white
- height: 70px
- font-size: 25px
border-radius: 50%
tap_action:
action: navigate
navigation_path: /dashboard-thuis/verlichting
- type: custom:button-card
color_type: card
name: Zonnepanelen
styles:
card:
- background: transparent
- color: white
- height: 70px
- font-size: 25px
border-radius: 50%
tap_action:
action: navigate
navigation_path: /dashboard-thuis/zonnepanelen
- type: custom:button-card
color_type: card
name: Instellingen
styles:
card:
- background: transparent
- color: white
- height: 70px
- font-size: 25px
border-radius: 50%
tap_action:
action: navigate
navigation_path: /dashboard-thuis/instellingen
- type: custom:button-card
color_type: card
name: Camera's
styles:
card:
- background: transparent
- color: white
- height: 70px
- font-size: 25px
border-radius: 50%
tap_action:
action: navigate
navigation_path: /dashboard-thuis/cameras
columns: 4
view_layout:
grid-area: b1
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.buitenverlichting
name: Buitenverlichting
view_layout:
grid-area: a3
Creating the first column is ok:
Second column is just space.
By adding the third column it looks like this:
I do understand that the rowheight is the same for all the columns but is there a way i can adjust the rowheight for the third column ?