🔹 Layout-card - Take control of where your cards end up

OK @Olen,thanks for your example and doing probably something wrong, but when I copy this in my Dashboard, then i got this error :flushed:

I figured out, or I think I did :wink: from searching on Google the this forum, that I have to add a view option? and yes if I do that then I don’t get an error anymore, but then is my lovelace canvas, dashboard empty if I view it, to be honest this is what happened before I was testing with @thomasloven examples also so please can you explain me what I do wrong here :flushed: :cry:


In this example, you need to indent everything to be in line with the entry under “views”

views:
  - path: default_view
    title: Thius
    panel: true
(...) 

Each “view” is a tab, and each tab cosists of several cards.

1 Like

"Config is not an object

break"

that is what shows on card to me

sorry, what is that camera
xiaomi?

Hi @Olen my apologies for the late reply, the wife thought that it was a better idea to do some house chores then playing on my laptop :wink:
I updated the code like I understand from your reply, I see now the cards but get these errors, any idea what I’m doing wrong here?

Thanks!

views:
  - type: 'custom:layout-card'
    column-with: 100%
    layout: vertical
    max_columns: 3
    cards:
      - type: markdown
        content: Dummy 1
      - break
      - type: markdown
        content: Dummy 2
      - break
      - type: markdown
        content: Dummy 3
      - break
      - type: markdown
        content: Dummy 4
      - break
      - type: markdown
        content: Dummy 5
      - break
      - type: markdown
        content: Dummy 6
      - break

layout-card is a card, and should go under cards: not under views.

http://thomasloven.com/blog/2018/08/YAML-For-Nonprogrammers/
https://www.home-assistant.io/lovelace/views/
https://github.com/thomasloven/lovelace-layout-card#layouts

Hi @thomasloven thanks for your quick reply, changed and works! now going to play with it and see if I can get my layout build :wink:

Thanks for the links!


title: Thuis Mertens Geysen
views:
  - path: default_view
    title: Home
    panel: true
    badges: []
    cards:
      - type: 'custom:layout-card'
        column-with: 100%
        layout: vertical
        max_columns: 3
        cards:
          - type: markdown
            content: Dummy 1
          - break
          - type: markdown
            content: Dummy 2
          - break
          - type: markdown
            content: Dummy 3
          - break
          - type: markdown
            content: Dummy 4
          - break
          - type: markdown
            content: Dummy 5
          - break
          - type: markdown
            content: Dummy 6
          - break

Yes, Yes, Yes it works! @thomasloven @Olen your great, thanks for your patience and willingness to help this novice a little further!!!

For everybody who need help with this like I did, here is my example!

https://dmertens.stackstorage.com/s/Ucy2BU3DtGPu1DW

I created this for my big screen TV connected to a Raspberry Pi (4 columns)

1 Like

Not sure whether to post this in the card-mod thread or here - don’t suppose it makes too much difference.

I’m using custom:layout-card in grid layout mode. I’d like to vertically centre a card in the grid area I’ve put it in. In chrome I can add align-self: center to hui-picture-elements-card (as below).

Can I do this with card-mod? I’ve tried applying it to ha-card as a style in picture-elements but that doesn’t work.

I could ‘fudge it’ with an embedded vertical layout-card and a couple of gap-cards but that seems unwieldy.

Hi is it possible to have the first column the full lenght of the screen? Like this

1   2   3   4
    5   6   7
    8   9   10

the one would go all the way down to where 8 ends.

Try margin: auto;.

Yes. With the grid layout, and by setting height: 100% to the card with card-mod.

Thank you sir.

thanks, tried no joy.

Hi guys,
I am using the standard 8 card example for horizontal card layout and no matter what I do it just displays them vertically, am I missing something?

type: 'custom:layout-card'
layout: horizontal
cards:
  - type: entities
    title: 1
    entities:
      - switch.meross_front_led_strips
  - type: entities
    title: 2
    entities:
      - switch.meross_front_led_strips
  - type: entities
    title: 3
    entities:
      - switch.meross_front_led_strips
  - type: entities
    title: 4
    entities:
      - switch.meross_front_led_strips
      - switch.meross_front_led_strips
      - switch.meross_front_led_strips
      - switch.meross_front_led_strips
  - type: entities
    title: 5
    entities:
      - switch.meross_front_led_strips
  - type: entities
    title: 6
    entities:
      - switch.meross_front_led_strips
  - type: entities
    title: 7
    entities:
      - switch.meross_front_led_strips
  - type: entities
    title: 8
    entities:
      - switch.meross_front_led_strips

Looks like this:

Maybe this helps? 🔹 Layout-card - Take control of where your cards end up

Love this card!

Hoping someone can help! I need to be able to have a card whose width grows when other cards are not present (conditional cards) and shrinks when they are. Here are the scenarios:

Scenario 1:

  • 5 columns (all cards shown)
  • Width of each column: 20%,50%,10%,10%,10%

Scenario 2:

  • 4 columns (one card hidden)
  • Width of each column: 20%,60%,10%,10%

Scenario 3:

  • 3 columns (two cards hidden)
  • Width of each column: 20%,70%,10%

Scenario 4:

  • 2 columns (three cards hidden)
  • Width of each column: 20%,80%

So essentially column 2 grows and shrinks depending on whether cards in columns 3,4,5 exist.

Is this possible?

I have exactly the same problem. No matter what layout I use, everything ends up in a single column.

Here’s my example, which attempts to force two columns by specifying vertical layout with a break:

# VIEW - Power & Energy

badges: []
cards:

  - type: custom:layout-card
    layout: vertical
    max_columns: 2
    min_height: 1
    cards:

      - type: custom:vertical-stack-in-card
        title: Home Power Usage
        cards:
          - type: custom:mini-graph-card
            name: Right Now
            points_per_hour: 6
            line_color: midnightblue
            lower_bound: 0
            height: 200
            show:
              extrema: true
              labels: true
              points: hover
            entities:
              - entity: sensor.home_power

          - type: horizontal-stack
            cards:
              - type: custom:bar-card
                direction: up
                name: Last Hour
                height: 120px
                color: midnightblue
                max: 8000
                positions:
                  value: outside
                  title: outside
                  indicator: inside
                entity: sensor.average_power_last_hour
              - type: custom:bar-card
                direction: up
                name: Last Day
                height: 120px
                color: midnightblue
                max: 8000
                positions:
                  value: outside
                  title: outside
                  indicator: inside
                entity: sensor.average_power_last_day
              - type: custom:bar-card
                direction: up
                name: Last Week
                height: 120px
                color: midnightblue
                max: 8000
                positions:
                  value: outside
                  title: outside
                  indicator: inside
                entity: sensor.average_power_last_week
              - type: custom:bar-card
                direction: up
                name: Last Month
                height: 120px
                color: midnightblue
                max: 8000
                positions:
                  value: outside
                  title: outside
                  indicator: inside
                entity: sensor.average_power_last_month

      - break

      - type: custom:vertical-stack-in-card
        title: Basement Fridge & Freezer
        cards:
          - type: custom:mini-graph-card
            name: Power
            points_per_hour: 6
            line_color: darkmagenta
            height: 100
            lower_bound: 0
            icon: mdi:power-socket-us
            show:
              extrema: true
              labels: true
              points: hover
            entities:
              - entity: sensor.basement_plug_power
          - type: glance
            columns: 3
            entities:
              - entity: switch.basement_plug_switch
                name: Status
                tap_action:
                  action: none
              - entity: sensor.basement_plug_current
                icon: mdi:gauge
                name: Current
              - entity: sensor.basement_plug_voltage
                icon: mdi:gauge
                name: Voltage

      - type: custom:vertical-stack-in-card
        title: Office PC
        cards:
          - type: custom:mini-graph-card
            name: Power
            points_per_hour: 6
            line_color: darkmagenta
            height: 100
            lower_bound: 0
            icon: mdi:power-socket-us
            show:
              extrema: true
              labels: true
              points: hover
            entities:
              - entity: sensor.pc_power
          - type: glance
            columns: 3
            entities: 
              - entity: switch.peanut_1
                name: Status
                tap_action:
                  action: none
              - entity: sensor.pc_current
                name: Current
                icon: mdi:gauge
              - entity: sensor.pc_voltage
                icon: mdi:gauge
                name: Voltage

      - type: custom:vertical-stack-in-card
        title: Clothes Washer
        cards:
          - type: custom:mini-graph-card
            name: Power
            points_per_hour: 6
            line_color: darkmagenta
            height: 100
            lower_bound: 0
            icon: mdi:power-socket-us
            show:
              extrema: true
              labels: true
              points: hover
            entities:
              - entity: sensor.washer_power
          - type: glance
            columns: 3
            entities:
              - entity: switch.washer_switch
                name: Status
                tap_action:
                  action: none
              - entity: sensor.washer_current
                name: Current
                icon: mdi:gauge
              - entity: sensor.washer_voltage
                icon: mdi:gauge
                name: Voltage

icon: 'mdi:power-socket-us'
path: energy_tab
title: Energy Monitor

I’m using layout-card version 13 with Firefox 75 on Linux.

I may be wrong, but I think Lovelace will put the layout card in a single column, unless you specify panel: true to give the layout card the full screen to play with.

3 Likes

That was 100% it. Thanks!

Can someone help me with creating a layout like so:
image

I’ve been going over the documentation and I know it’s probably the grid related part but can’t seem to work it out.
Maybe someone with a similar setup can lend a hand.
Thanks

2 Likes