How to get a separate column in lovelace?

Can someone help me out? i’d like to start a new horizontal column (just the lights), but i can’t seem to get it working, this is what i have so far

title: My Awesome Home![47%20PM|690x381](upload://7aYPNXY2d1bUFI72EAq57B1rfPM.png) 

resources:
  - url: /local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.2.2
    type: js
  - url: /local/custom_ui/card-modder.js
    type: module
  - url: /local/custom_ui/weather-card.js
    type: js
  - url: /local/custom_ui/layout-card.js
    type: js
  - url: /local/custom_ui/mini-media-player.js?v=0.9.2
    type: module

views:
  - path: default_view
    title: Home
    icon: 'mdi:home'
    cards:
      - type: horizontal-stack
        cards:
          - type: entities
            title: Presense
            show_header_toggle: false
            entities:
              - entity: input_boolean.david_occupancy 
                name: Davids Home

      - type: hortizontal-stack
        cards:
          - type: light
            entity: light.23460a
      - type: hortizontal-stack
        cards:
          - type: light
            entity: light.2349a5

1 Like

You only need to reference horizontal-stack once if you want them in a row. If you want two seperate vertical columns, create two vertical-stack cards and place horizontal-stack in them

How do you do that? I tried that

Check out the gallery examples. Hui stack cards is the one you’re after.

https://home-assistant-lovelace-gallery.netlify.com/

how does he get the three separate columns though? thats what . i really want

Use three vertical-stack cards

that just stacks them, it doesn’t put them in there own column

you can put 3 vertical stacks inside a horizontal stack

Just like the examples:

- type: horizontal-stack
  cards:

    - type: vertical-stack
      cards:

    - type: vertical-stack
      cards:

    - type: vertical-stack
      cards:
2 Likes
views:
  - path: default_view
    title: Home
    icon: 'mdi:home'
    cards:
      - type: horizontal-stack
        cards:
          - type: vertical stack
            cards:
              - type: entities
                title: Whose Home
                show_header_toggle: false
                entities:
                  - entity: input_boolean.david_occupancy 
                    name: David
          - type: vertical stack
            cards:
              - type: light
                entity: light.23460a
          - type: vertical stack
            cards:
              - type: light
                entity: light.2349a5

Isn’t the problem with this approach, though, that the 3 columns will always only take up the width of what a single card would be - unless you make the whole view a panel, right?

thats what i wanted… the whole panel, but lost, how do i make the whole view a panel?

ah so I just use 3 vertical stacks and it puts them side-by-side

Use panel: true for your view, it will render the first card to 100% width if you want them in horizontal-stack. As I said originally though, use 3 x vertical stacks to get full width. Or fixed with a horizontal then vertical stack.

Its all fine saying thats what you wanted but you did not say that in your original post clearly.

the problem with that is that on a mobile, you end up with thin columns… with sep vert stacks they display depending on the screen width

1 Like

How does it fix my red error?

You forgot the - in vertical-stack. Go read the guides seriously.

appreciate the help, but now it’s filled to the rim…, sigh