How to create 3 different sized columns in a dashboard

Configuration Frontend
1

Hi
I am a little stumped. I am trying to create a Dashboard that is 3 columns of different sizes (for a Tablet)
The columns would be 48% 35% 17%

I have tried the Layout Card (HACS) but cannot seem to get it to work. I found another thread so I set it up as a Panel with a single Layout Card, and while it works and displays as expected, it is bloated with code and unmanagable for any edits (they take 10-15s!)

Any ideas on how to create a dashboard with 3 different sizes columns?

This is what I acheived with a single (now unmanageable) card :slight_smile:

image
image1461×900 122 KB

3

You’re on the right track with the layout-card, it should give you what you want.

This is a short example to get you started:

title: your_awesome_page_title
icon: 'mdi:home'
panel: false # not needed here, just because you mentioned it
path: home
type: custom:grid-layout
layout:
  grid-template-columns: 48% 35% 17%
  grid-template-areas: |
    "col1 col2 col3"
badges: []
cards: 
  - # col1
    type: markdown
    view_layout:
      grid-area: col1
    content: >
      ## Hello!  
[...]

Now you only need to setup the cards for the columns and you should be good to go. Note the view_layout followed by grid-area! :slight_smile:

1 Like
4

Thanks - that worked!

The only issue I have found is if I use type: grid, it errors if I add the

view_layout:
  grid-area: col3

Thanks
Wayne

5

type: grid? That’s supposed to do what? :thinking: As far as I know, there is no type: grid. :slight_smile:

Post the code, so we can take a look at it. :slight_smile:

6

I put it in a vertical stack and it works. But when I had it just as a card on colc (col3), it did not

type: grid
view_layout:
  grid-area: colc
square: false
columns: 2
cards:
  - type: gauge
    entity: sensor.powergrid_battery
    name: PowerGrid
    min: 0
    max: 100
    severity:
      green: 40
      yellow: 94
      red: 30
  - type: gauge
    entity: sensor.powergrid_power
    name: PowerGrid
    max: 8000
    min: -8000
    severity:
      yellow: 5500
      green: 0
      red: -8000
    needle: true
  - type: gauge
    entity: sensor.powerpack1_battery
    name: PowerPack1
    min: 0
    max: 100
    severity:
      green: 40
      yellow: 94
      red: 30
  - type: gauge
    entity: sensor.powerpack1_power
    name: PowerPack1
    max: 8000
    min: -8000
    severity:
      yellow: 5500
      green: 0
      red: -8000
    needle: true
  - type: gauge
    entity: sensor.powerpack2_battery
    name: PowerPack2
    min: 0
    max: 100
    severity:
      green: 40
      yellow: 94
      red: 30
  - type: gauge
    entity: sensor.powerpack2_power
    name: PowerPack2
    max: 8000
    min: -8000
    severity:
      yellow: 5500
      green: 0
      red: -8000
    needle: true
1 Like
7

Check for proposals