You can, you need the same number of cells on each row, so you need to break down the row into something thatās divisible by every split you want to make. It can get very messy, very quickly.
I tend to try and stick to either 50%, 25%, or (at a push) 20% cells. 20% would make it easy to do 20/80 and 60/40 on different rows.
"top20 top80 top80 top80 top80"
"mid60 mid60 mid60 mid40 mid40"
It can be easier just to use two layout cards in a vertical stack and play with margins etc.
The joys of using an iPad keyboard - Iāve updated it.
Iāve never tried, controlling height does seem tricker, especially if you want it to flex for different screen sizes. Problem is that because the browser scrolls thereās not a finite 100%.
Thanks. But, i wonāt even try to figure out how and where to insert your ātopā¦ā lines, since, as you suggested, i managed to do something with two layout cards.
Yeah the only way it seems to be to mess with the widths until it fits, not great but will do the job.
It will be for a 1080p screen so it would be cool if you can specific that somehow
Hi Steve, have you managed to solve your problem? Iām struggling with exactly the same thing. I just want a very simple layout where the first column is a bit smaller than the other columns. But I also want the cards to appear right underneath each other in the different rows. So no grid for the rows. I just canāt get it done. Any help would be highly appreciated!
PS: What seems to work is to place all cards in one column into a vertical stack. But this should not be the only solution.
Hey - was just trying to figure this out myself.
Under layout, there is a padding option. If you set:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: '-4px'
ā¦it should do the trick! I think its adding some double padding by using grid for the main layout and then layout card inside of it. Something like that.
@stratotally
I went to try that out and forgot I had changed that tab around and tossed the layout-card. I will give a another shot at some point though.
Thanks
Sorry for the late reply no I didnāt I just added them into stacks like you mention.
I keep getting the following error message:
https://my nabu casa number .ui.nabu.casa/hacsfiles/lovelace-layout-card/layout-card.js?hacstag=156434866244:13:3316 TypeError: undefined is not an object (evaluating āthis._observer.disconnectā)
I have the following line in configuration.yaml:
- url: /hacsfiles/lovelace-layout-card/layout-card.js?v=2.4.4
type: module
I have also tried type: js but that give the same error message
can someone tell me whatās wrong or why i am getting this message?
Thanks
Hi, is it possible to create a nested grid? If not is it the best option to play with margins and paddings or something else? Thanks
Is there the possibility to specify a min-width? When resizing the window, it currently adds another column too early, having the other columns with too low width, so content partly does not fit into its cards.
I just see a max width and a fixed width. Or what would be the right approach to ensure that columns do not become too small?
Second question, I see that the parameter min_height is not mentioned anymore for the integration as available parameter, but it is still being considered by it (layout is different with or without this parameter). So is this now an undocumented feature? 
I love this layout-card, even for me that is a hopeless homeautomation enthusiast without any coding konwledge this is dead simple.
But, the most painful thing, which is a showstopper for the moment. Why canāt I cast this to a Nest Hub Max? I have seen in this thread that other people have experienced this as well, as far as 4 years back. Any solution?
Iām using
width: 367
max_width: 500
and get more or less the standard behavior then.
Is there a way to set the column where to place a card
view_layout:
column: 3
depending on the number of columns displayd? So if 3 then 3, if 2 then 2. In general to most right one. Via conditions or templates or .?
Or/And it there a possibility in grid view to have not really a grid, but columns or more than one card per frid slot. So that I and define it with media queries as I want?
Thanks, the width seems to also be a minimum width, as the cards still increase a bit when the window size is increased.
Hello!
I need some help here. I have gone through this post and the CSS Guide, and I canāt quite figure out how to make this work.
I want this logbook entry (which is part of a vertical stack with a header and footer image card) to show up in square 7 in exactly the right place. Once I get it in the right place, I will blank out the background behind it. I plan to do the same with more cards, buttons, etc once I get this first thing in the right place.
No matter what I do, this card is locked in position 7. Thatās good. Itās just that the grid square doesnt show up where CSS should be putting it. Itās filling almost half the page width and almost half of the height.
views:
- theme: Backend-selected
title: test
path: test
layout:
grid-template-columns: 30% 12% 58%; ## Also tried: 896px 352px 1784px;
grid-template-rows: 11% 17% 40% 26% 6%;
grid-template-areas: >-
"header header header" "main1 main2 main3" "main4 main5 main6" "main7
main8 main9" "footer footer footer"
type: custom:grid-layout
badges: []
cards:
- type: custom:gap-card
view_layout:
grid-area: main1
- type: custom:gap-card
view_layout:
grid-area: main4
- type: custom:gap-card
view_layout:
grid-area: header
## I threw in these gap cards to see if they would help.
## The card *did* move down, but still not to where it belongs.
- type: vertical-stack
view_layout:
grid-area: main7
cards:
- type: markdown
card_mod:
class: header-right
content: '# Logs'
- type: logbook
entities:
- sensor.openweathermap_condition
- binary_sensor.updater
## Etc....
card_mod:
class: middle-right
- type: markdown
card_mod:
class: footer-right
content: '## '
If I wasnāt already bald, I would have pulled all of my hair out. What am I missing???
With the gap cards in place, everything shows up with the correct general arrangement, but the cards just donāt go inside of and fill their grids. The first column should be a bit smaller, the middle, very small, and the last, most of the page. The row heights arenāt working either. Everything is showing up equal in width. I have tried everything with no luck.
views:
- theme: Backend-selected
title: Lighting
icon: mdi:lightbulb-group
type: custom:grid-layout
layout:
grid-template-rows: 11% 17% 30% 26% 6%;
grid-template-columns: 30% 12% 58%;
grid-template-areas: >-
"top top top" "main1 main2 main3" "main4 main5 main6" "main7 main8
main9" "bottom bottom bottom"
justify-content: stretch;
background: center / cover no-repeat url(/local/USS%20Camden%20NCC-99734.png) fixed
visible:
- user: b1dc9ff152ba40f29bc03d6c23a29459
badges: []
cards:
- type: vertical-stack
cards:
- type: markdown
card_mod:
class: header-right
content: '# Logs'
- type: logbook
entities:
- sensor.openweathermap_condition
- binary_sensor.updater
## Etc....
card_mod:
class: middle-right
styles:
card:
- height: 100px
- width: 100px
- type: markdown
card_mod:
class: footer-right
content: '## '
view_layout:
grid-area: main7;
place-self: stretch;
- type: custom:gap-card
view_layout:
grid-area: main1
styles:
card:
- width: 100px
- type: custom:gap-card
view_layout:
grid-area: bottom
- type: custom:gap-card
view_layout:
grid-area: main2
styles:
card:
- width: 50px
- type: custom:gap-card
view_layout:
grid-area: main3
- type: custom:gap-card
view_layout:
grid-area: main4
styles:
card:
- width: 100px
- type: custom:gap-card
view_layout:
grid-area: main5
styles:
card:
- width: 50px
- type: custom:gap-card
view_layout:
grid-area: main6
- type: custom:gap-card
view_layout:
grid-area: main8
styles:
card:
- width: 50px
- type: custom:gap-card
view_layout:
grid-area: main9
- type: custom:gap-card
view_layout:
grid-area: top
Hey Guys/Gals,
Iām having a lot of trouble here. I have tried various variations of this but I canāt seem to get it working. I am trying to have 3 column, but nothing seems to work.
views:
- title: Home
cards:
- type: custom:layout-card
column-with: 100%
layout_type: horizontal
layout:
max_columns: 3
cards:
- type: custom:stack-in-card
view_layout:
column_num: 1
cards:
- type: custom:mushroom-light-card
entity: light.all_lights
name: House
fill_container: true
primary_info: name
icon: mdi:home
- type: custom:mushroom-light-card
entity: light.master_lights
fill_container: true
show_color_control: false
name: Master
show_brightness_control: true
icon: hue:room-bedroom
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.kitchen_lights
name: Ktichen
icon: mdi:countertop-outline
- type: custom:stack-in-card
view_layout:
column_num: 2
mode: vertical
cards:
- type: custom:clock-weather-card
entity: weather.openweathermap
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_days: 5
locale: en-US
time_format: 12
date_pattern: P
hide_today_section: false
hide_forecast_section: true
- type: weather-forecast
entity: weather.openweathermap
show_current: false
show_forecast: true
- type: weather-forecast
entity: weather.home
show_current: false
show_forecast: true
- type: custom:layout-break
- type: thermostat
entity: climate.home
- type: custom:layout-break
- type: markdown
content: Dummy 4
- type: custom:layout-break
- type: markdown
content: Dummy 5
- type: custom:layout-break
- type: markdown
content: Dummy 6
- type: custom:layout-break
Trying to remove gaps in the layout-card. I want to use the layout-card (right) instead of the stack-in-card (left). I want the layout-card to look just like the stack-in-card without the gaps and possibly with a background & border. Tried everything I could find, I canāt get it. This is the layout-card yaml:
Any ideas to get rid of these gaps or am I missing that itās not possible?
