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

Finally released on HACS!

This card lets you tweak how cards are placed in your lovelace views.

Here’s just one example.

With some work, this can be used to create responsive designs:



15 Likes

You really rock @thomasloven. Thanks for all your contributions !

Is there anything I can do to get this to work with Home Assistant Cast? It works fine on my laptop and iPhone but if i cast it the screen is blank.

I have noticed that if use the custom button card it doesn’t work with templates and im wondering if that has anything to do with this not displaying in cast. If I don’t template it seems to be fine. Im not sure if there’s a fix on my end or not.

Thanks

New feature!
CSS Grid layouts - for maximum control!

1 Like

V2.3 to V6 seems a big jump in numbering?

Yes.

I’m trying to move over to just integer numbers for all my plugins. Makes it easier for me to keep track of.

1 Like

This is awesome, thanks a lot !

I’m having an issue, when first reloading the page the card seems nice. But when I change to another view and then go back to the previous view the card only shows one column. This occurs everytime I go to the view twice. This gets fixed when I reload the page again.
Occurs everytime. Happens only on computer because on phone it always appears as one column.

Example of my view code:

- title: View
  panel: true
  cards:
    - type: 'custom:layout-card'
      layout: vertical
      max_columns: 3
      cards:
        - type: something
          .........
              
        - break

        - type: something
          .........
              
        - break

        - type: something
          .........

Is this with the latest release (release 7 - 4 days ago)?

yes, that’s correct

Fixed!  

1 Like

Awesome, thanks!!

As I mentionned earlier, the new grid system is very handy ! What would be your approach for a responsive layout ? I guess we can use card mod with breakpoints to alter the css of the layout card, but it seems pretty messy to me and I’m sure there’s a better way.

The end goal is to have a layout that fits nicely on different devices :

Mobile -> Tablet -> Desktop (picture not made by me)

One way to do this would be actually having three different layouts and switch between them based on mediaquery using state-switch.

The grid layout is still very much a work in progress, and I’m experimenting with ways to switch the layout dynamically without having to define the same card multiple times (though yaml node anchors will help with this a bit too).

1 Like

Thanks a lot for the suggestion, I’ll definitly try that out !

I’m heavily relying on lovelace_gen for my config, to me it plays the same role as anchors & much more. Is there any reason, in this case, to prefer using actual anchors instead of an !include statement ?

No    

Hi,

For some reason, I can’t make min_columns work:

  - badges: []
    cards:
      - cards:
          - entities:
              - light.daniels_room
            title: 1
            type: entities
          - break
          - entities:
              - light.daniels_room
            title: 2
            type: entities
          - break
          - entities:
              - light.daniels_room
            title: 3
            type: entities
          - entities:
              - light.kitchen
            title: 4
            type: entities
          - entities:
              - light.kitchen
            title: 5
            type: entities
          - entities:
              - light.kitchen
            title: 6
            type: entities
        layout: auto
        min_columns: 5
        type: 'custom:layout-card'
    panel: true
    path: dev2
    title: dev2

Output looks as follows. I would expect to have 5 columns. Any advice?

Hi there,

Just wanted to thank you for you useful advices, what you created is really powerful !

state-switch + lovelace_gen + layout card give me a pretty good result in term of responsivness. There’s still overlap & my interface is kind of meh, but I’m to lazy to fix the css right now. Anyway I finally have an interface that adapts to all my devices thanks to you, and it’s only using a single file for the UI ! :slight_smile:

1 Like

The layout rules for auto still applies, so it will still fill up each column with at least five units of cards before moving on to the next one. But it will fill at least five columns before trying to put more cards into the first ones. Try vertical instead.