Lovelace - more than 2 cards in a row

Hi,

I am currently trying to switch to Lovelace, working great so far :slight_smile:

One maybe stupid question: When using a view I can see my cards in a responsive design, so when I have a small browser window, the cards are moving from a 2-cards-per-row design to a 1-card-per-row design automatically. This is great!

But when I have a really wide browser window the design keeps the 2-cards-per-row design, even if there is enough space for a 3-cards-per-row design.

Is it possible to get am automatic 3-cards-per-row design, too? What I don’t want is to have a fixed solution, I want a solution wich automatically switches the number of cards per row depending on the browser window width.

Thanks!

Horizontal stack is your friend:

panel: true

Is your solution.

And

    cards:
        type: horizontal-stack
        cards:
        - type: vertical-stack
          cards:
          - type: //you add your cards here
        - type: vertical-stack
          cards:
          - type: //you add your cards here
        - type: vertical-stack
          cards:
          - type: //you add your cards here

And now you have 3 columns.

What you have to actually do is play with vertical and horizontal stacks. This is just a workaround and not a solution.
If you see that panel in a small screen it wont be nice…

Thanks, but I have already played around with horzontal-stack and as far as I understand it I only can configure a fixed solution, which is really annoying when using the same view on different devices with different solutions.

Is this correct?

Yes this is correct. Hopefully this will be fixed in some update in the future, but for now you wont make it. Having the cards without stacking them, will let Lovelace decide what the best stacking is but in some screen sizes it may not what you want. On the other hand, if you do what I posted it will be exactly what you want but you cant have the same result on all devices unfortunately.
Another thing you could do, is have 2 different views, one for a specific device, and one for another… Just saying…

I think you must be miss judging your screen size. I’m guessing you don’t actually have room for 3 because what you are describing is normal Lovelace behavior:

EDIT: If you’re wondering. This is essentially 4 cards that have no stack associated with them. They are just placed inside a view.

1 Like

hm petro this is not working for me… and my screen is really big, there should be space for 4 cards in a row, but I have not more than 2 cards.

could you share your config so I could test yours?

btw: its working in the old home assistant view, only when using lovelace its not working.

This is my config for that section.

  - id: settings 
    icon: mdi:settings
    title: System
    cards:
      - id: d44485acff9146ce9ccb8793f95ef9d6  # Automatically created id
        type: custom:vertical-stack-in-card
        title: Internet Connection
        cards:
          - type: sensor
            entity: sensor.speedtest_download
            name: Download
          - type: horizontal-stack
            cards:
              - type: sensor
                entity: sensor.speedtest_upload
                name: Upload
                accuracy: 50
              - type: sensor
                entity: sensor.speedtest_ping
                name: Ping
                accuracy: 50
      - id: f8c4c2f39f134c66940818ef700632be  # Automatically created id
        type: custom:vertical-stack-in-card
        title: Server Status
        cards:
          - type: glance
            column_width: calc(100% / 2)
            entities:
              - entity: sensor.total_size_volume_1
                name: Total Volume
                accuracy: 5000
              - entity: sensor.used_space_volume_1
                name: Used Space
                accuracy: 5000
          - type: sensor
            entity: sensor.average_disk_temp_volume_1
            name: Temperature
          - type: horizontal-stack
            cards:
              - type: sensor
                entity: sensor.network_up
                name: Upload
                accuracy: 5000
              - type: sensor
                entity: sensor.network_down
                name: Download
                accuracy: 5000
          - type: horizontal-stack
            cards:
              - type: sensor
                entity: sensor.memory_usage_real
                name: Memory
                accuracy: 5000
              - type: sensor
                entity: sensor.cpu_load_total
                name: CPU Load
                accuracy: 5000
          - type: horizontal-stack
            cards:
              - type: sensor
                entity: sensor.temperature_sda
                name: Temp SDA
                accuracy: 5000
              - type: sensor
                entity: sensor.temperature_sdb
                name: Temp SDB
                accuracy: 5000
      - id: 829a201a89ba4a4e82c3d2354ba5e463  # Automatically created id
        type: custom:vertical-stack-in-card
        title: System Status
        cards:
          - type: entities
            entities:
              - entity: sensor.last_boot
                name: Last Boot
          - type: sensor
            entity: sensor.processor_use
            name: Load
          - type: horizontal-stack
            cards:
              - type: sensor
                entity: sensor.memory_free
                name: Memory free
                accuracy: 5000
              - type: sensor
                entity: sensor.disk_free_home
                name: Disk free
      - id: 7a581c63e6fa477eac1947096fc5c3ea  # Automatically created id
        type: custom:vertical-stack-in-card
        title: Multisensor
        cards:
          - type: glance
            column_width: calc(100% / 4)
            entities:
              - entity: binary_sensor.ms_motion
                name: Motion
              - entity: sensor.ms_alarm_level
                name: Alarm
              - entity: sensor.ms_burglar
                name: Burgler
              - entity: sensor.ms_ultraviolet
                name: UltraViolet
          - type: sensor
            entity: sensor.ms_temperature
            name: Temperature
            accuracy: 50
          - type: horizontal-stack
            cards:
              - type: sensor
                entity: sensor.ms_humidity
                name: Humidity
                accuracy: 50
              - type: sensor
                entity: sensor.ms_luminance
                name: Luminance
                accuracy: 50
1 Like

I found the problem: Its only working when more than 4 cards are configured in the view! You need minimum 5 cards, then it automatically switches to the 3-cards-in-a-row design.

In my tests I had only 4 cards configured… :laughing:

Thanks anyway! :smiley:

I have 4 cards configured in the view so I think your hypothesis is a little off.

hm in your code snipped there are a lot more cards configured than 4… I count the cards with all stacked cards altogether. If I delete all the stacked cards in your code, it is no more working, too.

I have it exactly reproduced it: with 4 cards overall its not working, with 5 or more it works. So for me that “problem” is solved :wink:

Only have 4 cards configured for the view. All cards ‘inside’ the 4 are in vertical stacks. Stacks, vertical or horizontal, behave and act like single cards when being displayed on the screen.

And read up on how the cards are displayed. It will fit cards so everything can be displayed in the smallest area that works with your monitor/browser size. I’m guessing when you add your 5th card, it can’t really maintain a tight fit so it adds the extra column.

As I wrote before: for me its perfectly reproducable, and its solved when using 5 or more cards, independently if stacked or not. I am happy, over and out :wink:

I’m reading you loud and clear. I still don’t think you are understanding what I’m laying down, so I’ll be more explicit. Your methodology of adding a 5th card will not work in all scenarios. If your cards are differently sized, you will get different results. I.E. 4 Tall cards will behave differently than 5 short cards.

Hi, is there any way you could share how to create these cards? I must be missing some dependancies. I have the Speedtest component installed and working, but can’t seem to get the card to show in Lovelace even after calling the service manually. I can see the 3 sensors for DL/UL/Ping and all three have correct states, just the card isn’t showing. Thanks!

Do you have lovelace setup currently? If not, take a look at the lovelace documentation. Check out the sidebar too, it has all the cards. You need to make a view and place cards in a view. Once that is done, you need to enable lovelace as the frontend ui.

Here is a bunch of example cards and their configurations:

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

Thanks for getting back to me so quickly. Yes, I have Lovelace active and working for other elements. Looking at your config code the two things I’m not familiar with are:

  - id: d44485acff9146ce9ccb8793f95ef9d6  # Automatically created id
    type: custom:vertical-stack-in-card

ID was an attribute that was important when this thread was created. I don’t believe that is automatically generated anymore. You can pretty much ignore that.

The type is a custom card. It’s similar to a vertical card, so you can use that if you like.

  - type: vertical-stack
1 Like