Hello
Iām trying to get the image from the cameras side by side in a horizontal view but i still without success as you can check in the picture bellow
The ideia a card that ocupe to 2 of the 3 columns in the lovelace with this and not as in the picture ā¦
Can anyone please let me know what i have to do in order to solve this ?
Thank you
Can you add this and show how it looks?
Edit Dashboard then add
aspect_ratio: .5/1
Hereā¦
Not sure if this is what you wanted 
but it looks like this on my end.
Thanks, but that makes all cards on that row huge and cover the whole screen, pushing the entire second row out at the bottom.
Hello
Iām able now to have the imagens side by side
But not stretched in the card in big as I pretend ā¦
The code:
type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: custom:horizontal-layout
title: Reolink
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
place-items: start stretch
aspect_ratio: 2/1
show_live_stream: true
title: Reolink
entity: camera.reolink01
show_name: false
styles:
icon:
- width: 100%
- margin-left: 0%
- type: custom:button-card
aspect_ratio: 2/1
show_live_stream: true
title: Reolink
entity: camera.reolink01
show_name: false
styles:
icon:
- width: 100%
- margin-left: 0%
Thank you for any help in order to solve this
Hello,
I removed the layout-card from HACS and rebooted HA but when I create a new view I can see from the drop down menu that the mansory (layout-card), as well as the grid (layout-card) etc. are still present.
Does it mean that layout-card is still present/installed somehow?
If so, how can I completely uninstall it?
Thank you
Hi,
Iām trying to unevenly distribute the cards in the view.
Letās say 1 card filling the whole first row, 2 cards 60% 40% in the second row and 3 cards with the same width in the third one.
To try to achieve it Iāve done the following
grid-template-columns: 50px auto 50px
grid-template-rows: auto
grid-template-areas: |
"main"
type: grid
columns: 1
title: OPNSense
cards:
- type: entities
state_color: true
entities:
- entity: binary_sensor.opnsense_pending_notices_present
- entity: sensor.opnsense_system_boottime
- entity: sensor.opnsense_cpu_load_average_one_minute
...... extra entities ......
square: false
view_layout:
grid-area: main
grid-column-start: 2
grid-column-end: auto
grid-row-start: 2
grid-row-end: 3
And this is what I get
It uses the whole width of the main area; I tried to duplicate the card and see if the width reduces to 50% but it does not work, the new card just comes on top of the original one
Iāve tried also to add this code at the end of the grid card (I tried with px values, percentage values and using :host instead of ha-card) but it does nothing
card_mod:
style: |
ha-card {
width: 50%;
}
Regards
Can you please clarify: do you wish your grid arrangement to apply to the whole dashboard? (for which you would use the custom layout card).
Or do you just want the grid to take up just part of the dashboard? (for which I guess you might use a grid card).
Iām not sure Iām clear what you are aiming to achieve by combining the twoā¦
Hi @CDRX2 (or anyone else lol)
Iām trying to do a similar sidebar and have some cards set up using the !include like you have.
But Iāve found if I make changes in any of the Yaml files and save, it never updates on the dashboard thatās even on the main Lovelace Yaml file or any of the !include cards even with a force refresh
Only way Iāve found to work is change the name slightly of the Yaml file save then rename it back and it loads the changes on a refresh.
Anyone any tips as I canāt use it like that.
Thanks
Hi!
What do you mean when you say force refresh? In order to reload, going into the three dots menu at the top right and selecting refresh has always worked for me.
Refreshing the page via the browser will not, however.
Hi good morning,
What Iām trying to achieve is something like the picture below; basically a non-homogeneous card distribution; I would like to be able to have rows with one card, with two cards at 50% with two cards at 70/30%, three cards ā¦
Regards
Hi thanks for the reply.
Yeah I meant Using the F5 key to refresh the browser.
Iāve not actually tried using the refresh from there Iāll do then when I get home from work thanks.
Are you willing to share your code for the sidebar part ?
Iām trying to work out how to do the background and other bits as mine just look like buttons next to each other as it is now but really a sidebar so would be great to see some working code.
Thanks
Yup, F5 wonāt reload your code.
Iāll PM you my sidebar code, too long to post here.
Ah, ok.
The first 2 rows would be pretty straightforward without using any custom cards, but the third row makes it slightly more complicated as youāve found.
Given that you have row 2 split 50/50, and row 3 split across what looks like 20/35/45, Iāve effectively worked from the need to split your grid into 20 column units to cover both scenarios.
My suggested code is therefore a little unwieldy and probably not what someone who knows CSS much better than me would do, but this produces something like what your picture shows I think:
## lovelace_test.yaml
title: Test
type: custom:grid-layout
layout:
# 20 equal columns, each taking up 1/20th of the width
grid-template-columns: repeat(20, 1fr)
grid-template-rows: auto
cards:
#Row 1
- type: horizontal-stack
view_layout:
# start and end point for card across all the columns
grid-column-start: 1
grid-column-end: end
cards:
- type: xxxx
#Row 2
- type: horizontal-stack
view_layout:
# start and end point for card across first half of the available columns
grid-column-start: 1
grid-column-end: 11
cards:
- type: xxxx
- type: horizontal-stack
view_layout:
# start and end point for card across second half of the available columns
grid-column-start: 11
grid-column-end: end
cards:
- type: xxxx
#Row 3
- type: horizontal-stack
view_layout:
# 4 columns = 4fr
grid-column-start: 1
grid-column-end: 5
cards:
- type: xxxx
- type: horizontal-stack
view_layout:
# 7 columns = 7fr
grid-column-start: 5
grid-column-end: 12
cards:
- type: xxxx
- type: horizontal-stack
view_layout:
# 9 columns = 9fr
grid-column-start: 12
grid-column-end: end
cards:
- type: xxxx
[The advantage of using horizontal-stack cards like this is that you can easily sub-divide them into equally spaced cards should you wish for e.g a row of buttons].
Hope this is enough to get you started at least e.g for adding a row with a 70/30 split (which you didnāt include in your picture).
Hi reste_narquois,
Yes, this has helped me a lot 
Regards
Hi. I have this layout ALMOST working like I want:
But atm I am hard coding the height of the outer buttons (for/rev and vol+ vol-), which isnt ideal (and renders at a different height on mobile). Any idea how to get them to fill up to the top and bottom automatically without the hacky icon_height: 8em?
type: custom:layout-card
layout_type: grid-layout
layout:
grid-template-columns: 1fr 4fr 1fr
place-items: center
cards:
- type: grid
columns: 1
cards:
- type: button
tap_action:
action: toggle
icon: mdi:skip-forward-outline
icon_height: 8em
show_name: false
- type: button
tap_action:
action: toggle
icon: mdi:skip-backward-outline
icon_height: 8em
- type: grid
cards:
- type: custom:button-card
color_type: blank-card
- type: button
tap_action:
action: toggle
show_name: false
icon: mdi:menu-up-outline
- type: custom:button-card
color_type: blank-card
- type: button
tap_action:
action: toggle
icon: mdi:menu-left-outline
- type: button
tap_action:
action: toggle
show_icon: false
name: OK
- type: button
tap_action:
action: toggle
icon: mdi:menu-right-outline
- type: custom:button-card
color_type: blank-card
- type: button
tap_action:
action: toggle
show_name: false
icon: mdi:menu-down-outline
- type: custom:button-card
color_type: blank-card
- type: grid
columns: 1
square: false
cards:
- type: button
tap_action:
action: toggle
show_name: false
icon: mdi:volume-plus
icon_height: 8em
- type: button
tap_action:
action: toggle
icon: mdi:volume-minus
icon_height: 8em
Personally, I wouldnāt use individual grid cards to place my buttons, but rather the horizontal-stack or vertical-stack card.
Iāve not tried this, but you could try setting 6 equal rows in your grid:
grid-template-rows: repeat(6, 1fr)
Then place each button (or easily grouped buttons) in a horizontal-stack card, and play around with combining the grid-column-start/grid-column-end and grid-row-start/grid-row-end settings under the view_layout options on each horizontal-stack card.
Edit: To be honest, Iām not 100% sure this will also change the height of the button cards in each stack, but there are ways of doing this with card-mod once you have your layout set up.
Couldnāt resist trying it out myself. This seems to work, without the need for card-mod as well:
## lovelace_test.yaml
title: Test
type: custom:grid-layout
layout:
grid-template-columns: 1fr 3fr 1fr
grid-template-rows: repeat(6,1fr)
cards:
#Column 1
- type: horizontal-stack
view_layout:
grid-column-start: 1
grid-column-end: 2
grid-row-start: 1
grid-row-end: 4
cards:
- type: button
....
- type: horizontal-stack
view_layout:
grid-column-start: 1
grid-column-end: 2
grid-row-start: 4
grid-row-end: end
cards:
- type: button
....
#Column 2
- type: vertical-stack
view_layout:
grid-column-start: 2
grid-column-end: 3
grid-row-start: 1
grid-row-end: end
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: button
....
- type: custom:button-card
color_type: blank-card
- type: horizontal-stack
cards:
- type: button
....
- type: button
....
- type: button
....
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: button
....
- type: custom:button-card
color_type: blank-card
#Column 3
- type: horizontal-stack
view_layout:
grid-column-start: 3
grid-column-end: end
grid-row-start: 1
grid-row-end: 4
cards:
- type: button
....
- type: horizontal-stack
view_layout:
grid-column-start: 3
grid-column-end: end
grid-row-start: 4
grid-row-end: end
cards:
- type: button
....
Oh man success! Thanks Chris!
I used your code, along with the switch to custom:button-card to get the center section buttons to be square, via aspect_ratio: 1/1. Renders perfect on all devices and orientations now.
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 4fr 1fr
grid-template-rows: repeat(6, 1fr)
cards:
Hi friend. I like very much. I was doing something very similar. Could you share the indent code?
Thanks a lot
Hey. The code is at the bottom of my last post already, just expand it in the > Code section.
