Thanks, that works 
! I’m new to CSS and learning some stuff and will checkout grid. Thanks for your help!
Try clearing your browser cache…
Aha, the new layouts are for the entire page and aren’t cards. Thanks Thomas, this is great work.
1 Like
Hi @thomasloven,
I was trying the below grid layout in order to have 2px empty shoulders, however in my case the “.” areas are still being populated with cards.
Am I missing something here?
- type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 2px 1fr 1fr 1fr 1fr 1fr 2px
grid-template-rows: auto
grid-template-areas: |
". none none none none none ."
grid-gap: 0px 4px
What is your Home Assistant version, and what do you see in the browser console?
i have now removed all, and make it clean install of this addon with hacs. no layout tab
i use Home Assistant 2021.3.4
Either the upgrade failed, or your browser does not agree that you cleared the cache.
It should ideally say “LAYOUT-CARD 2.1.0 IS INSTALLED”
Hi @noxx ,
Happened to me as well, in fact it is still happening on my main Chrome browser. It will be refreshed at some point eventually.
However on other devices it was refreshed almost immediately.
The solution for Chrome is to use incognito mode for now, in order to work on HA changes, until it will be refreshed at some point.
Following the directions linked from the readme seems to have a high rate of success too…
https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins#clearing-cache
works now. thx
Hello! Is there still a way of doing this kind of cards?
Can’t mange with 2.0+. They where not perfect because filled more space than the other cards and had no separation between them, but I could control each card dimensions. Thanks for your work!!!
Hello guys, i’m trying to place a grid layout inside another one.
I’ll try to paste as less code as I can to explain:
title: Home
views:
- title: Home
path: home
icon: 'mdi:home-roof'
panel: false
type: custom:grid-layout
layout:
grid-template-columns: 7% auto 23%
grid-template-rows: 100%
grid-template-areas: |
"sidebarsx main sidebardx"
badges: []
cards:
- type: custom:stack-in-card #Used to apply styling, as Card-Mod doesn't work on Vertical-Stack
layout:
grid-area: sidebarsx
cards:
- Other Stuff for a left Sidebar...
- type: vertical-stack
layout:
grid-area: main
cards:
- type: 'custom:layout-card' <--- Here is my problem
layout_type: grid
layout:
grid-template-columns: 40% 60%
grid-template-rows: 100%
grid-template-areas: |
"left right free"
cards:
- type: 'custom:simple-weather-card'
layout:
grid-area: left
other stuff...
- type: 'custom:atomic-calendar-revive'
layout:
grid-area: right
entities:
- entity: calendar.casa # Use your Calendar entity
other stuff...
Can someone help me?
Thank you!
I can’t reproduce this problem
Are you sure you have specified grid-area correctly on all cards?
Try setting it up as simply as possible in a new view, one step at a time.
- title: a
path: a
type: 'custom:grid-layout'
layout:
grid-template-columns: 7% auto 23%
grid-template-rows: 100%
grid-template-areas: |
"sidebarsx main sidebardx"
badges: []
cards:
- type: vertical-stack
cards:
- <<: &card
type: button
entity: light.bed_light
- <<: *card
- <<: *card
- <<: *card
layout:
grid-area: sidebarsx
- type: vertical-stack
cards:
- type: 'custom:layout-card'
cards:
- <<: *card
layout:
grid-area: left
- <<: *card
layout:
grid-area: right
layout_type: grid
layout_options:
grid-template-columns: 40% 60%
grid-template-rows: 100%
grid-template-areas: |
"left right free"
layout:
layout_type: masonry
layout_options: {}
- type: grid
cards:
- <<: *card
- <<: *card
- <<: *card
- <<: *card
layout:
grid-area: main
- type: vertical-stack
cards:
- <<: *card
- <<: *card
layout:
grid-area: sidebardx
Sorry for elevating this question again but I see many unanswered discussions around, did not find answer in this thread and the troubleshooting hint in layout-card guide does not work.
How to solve the problem on IOS with custom element doesn’t exist: horizontal-layout?
I do have this in config.yaml:
frontend:
themes: !include_dir_merge_named themes
javascript_version: latest
ok solved but I had to put the .js manually to /www/ and set up the resources with /local/ path manually, so hacs installation does not work for ios?
v2.0.0 and higher broke the panel view on my tablets, squishes everything in the middle.
Had to revert back down. Any fixes for that?
Adding a version number to the resource url worked for me.
url: /hacsfiles/lovelace-layout-card/layout-card.js?v=2
I thought that HACS should prevent caching, but that seems not possible with ios.
Confirming. Working for me as well. Do you think that now the layout card will update through hacs?
I did the last update (2.1.1) with hacs and there where no issues, but i don’t know if the changes take effect on ios or if i need to change the version number in the url.
I suspect the second.