Conditional Grid Layout?

Configuration Frontend
1

Is it possible to change the grid layout for a dashboard view based on a condition?
Something like the code below is what I have in mind. I’ve got some complex dashboards and I’m trying to improve performance by reducing the number of views and using conditional cards to give the same result. Some of my views have different layouts though, so I’m trying to figure out how to accommodate that. If the below can’t/won’t work in some way, any other ideas?

views:
  - path: home
    theme: Wall Tablet Theme
    title: home
    type: custom:grid-layout
    layout:
      {%if is_state('input_select.list','layout1')%} 
      grid-template-columns: 15% 28% 28% 29%
      grid-template-rows: auto
      grid-template-areas: |
        "analog weather main1 cameras"
        "clock weather main1 cameras"
        "menu weather main1 cameras"
      {%elif is_state('input_select.list','layout2')%} 
      grid-template-columns: 25% 50% 25%
      grid-template-rows: auto
      grid-template-areas: |
        "gap gap gap"
        "groups player favorites"
2

Better to ask here

3

@sdholden28 - were you able to figure this out?

4

I did not. I ended up changing the grid layout to a 10x10 and eliminating the grid areas. By spanning columns and rows I was able to create different layouts with the same base configuration.

1 Like