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:
36 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
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 ! 
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
...