How to create a Lovelace grid but with 60:40 split of columns

[pmjones (Phil)]

I have made a home control panel using an old phone mounted on the wall, with a Lovelace dashboard which I have created using the visual editor plus a bit of code where necessary.

I’d like to make it a little smarter so that I have a narrow column on the left hand side with buttons which change over the controls/information displayed on the right hand side. I think I am very close to achieving this, but Lovelace always splits the screen 50:50.

I have been reading all about the Custom: Layout Card and installed it, but despite hours of experimentation cannot find how to create a 25:75 split into which I can insert regular Lovelace cards using the visual editor.

Please can you help me understand how to get the basics in place, so I can do this. I am really keen to have the dashboards editable within the visual editor, but am happy to have code as the backbone.

Thanks,

Phil

[tom_l]

Have you tried the new built in sidebar view?

Sidebar View

[pmjones (Phil)]

Thanks. I hadn’t seen that. I’ll give it a try.

[tom_l]

I’m not sure what the split is, might be a bit larger than 25:75.

[Ildar_Gabdullin]

25/75, 10/90 - this can be managed by card-mod-theme.

[mtrista]

Do you have an example on how to do this?

[pmjones (Phil)]

I have a pretty complex grid layout, which I’m happy to share but not sure if here is the right place to dump a huge load of YAML code. Are you looking for something simple to get you started or more inspiration? This is what I’m using on an old phone as a wall-mounted control panel. The buttons on the left cause the sub-panel on the right to change to show a different selection of options.

kiosk_mode:
  kiosk: true
  admin_settings:
    kiosk: false
views:
  - title: Home
    path: home
    icon: ''
    layout:
      column_widths: 6fr 20fr
    type: custom:horizontal-layout
    badges: []
    cards:
      - type: vertical-stack
        cards:
            ** cards go here
      - type: vertical-stack
        cards:
           ** cards go here

[mtrista]

I’m actually looking for something specific: how to set the horizontal spacing between the vertical columns in Lovelace so that there’s spacing between them. You know how they’re all mushed together by default like this? No likey. Was hoping to do this with just card-mod (or at least without custom cards)