🔹 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:



35 Likes

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

5 Likes

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

1 Like

New feature!
CSS Grid layouts - for maximum control!

4 Likes

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:

3 Likes

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.

Hi Thomas,

Thanks for this (and other) components. I’m facing a problem layouting my cards. For some reason they are only listed vertically, while I would expect them to go horizontally to if vertical space was not enough.

Vertical goes OK when i remove the panel: true, but i would expect it to use more card-columns, so it scales on desktop and mobile

When I add the panel: true, my custom-buttons are blown-up:

Can you tell me what I;m doing wrong here ?

# lovelace_gen

title: Verlichting
icon: mdi:lightbulb
panel: true

cards:
  # Repeat several times
  - type: vertical-stack
    cards:
      - !include
        - '../templates/header_text.yaml'
        - content: "Living"

      - type: custom:layout-card
        justify_content: start
        layout: horizontal
        min_columns: 4
        max_columns: 4
        cards:
          - !include
            - '../templates/button.yaml'
            - entity: light.living_spots_rondom
              name: Rondom
          - !include
            - '../templates/button.yaml'
            - entity: light.living_spots_zithoek
              name: Zithoek
              icon: mdi:television-classic
          - !include
            - '../templates/button.yaml'
            - entity: light.living_luster
              name: Tafel

          - type: custom:button-card
            color_type: blank-card
            
      - type: custom:layout-card
        justify_content: start
        layout: horizontal
        min_columns: 4
        max_columns: 4
        cards:
          - !include
            - '../templates/button.yaml'
            - entity: switch.living_schemerlamp_straat
              name: Straat
          - !include
            - '../templates/button.yaml'
            - entity: light.hue_living_schemerlamp_zetel
              name: Zetel
          - !include
            - '../templates/button.yaml'
            - entity: light.hue_living_schemerlamp_kast
              name: Kast
          - !include
            - '../templates/button.yaml'
            - entity: light.hue_living_schemerlamp_keuken
              name: Keuken
  - type: vertical-stack
...