Hi,
I’m using the thomasloven lovelace-layout-card to learn how to manage my views.
I wanted to organize the items basing on a matrix, let’s say a 5x5, and place buttons, cameras cards and so on occupying a certain number of the cells of this matrix.
I started with a simple example that is not working, let’s say i want to three buttons in this way:
I tried with the following code:
type: custom:grid-layout
layout:
grid-template-rows: 20% 20% 20% 20% 20%
grid-template-columns: 20% 20% 20% 20% 20%
cards:
- type: custom:button-card
entity: scene.scena_buonanotte
color: auto
name: Buonanotte
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.scena_buonanotte
view_layout:
grid-column: 1 / 2;
grid-row: 1 / 2;
- type: custom:button-card
entity: scene.scena_buonanotte
color: auto
name: Buonanotte
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.scena_buonanotte
view_layout:
grid-column: 1 / 2;
grid-row: 2 / 3;
- type: custom:button-card
entity: scene.scena_buonanotte
color: auto
name: Buonanotte
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.scena_buonanotte
view_layout:
grid-column: 2 / 3;
grid-row: 1 / 3;
But i have this output:
So i tried to modify it in this way (even if i don’t understand why the first should not work):
type: custom:grid-layout
layout:
grid-template-rows: 20% 20% 20% 20% 20%
grid-template-columns: 20% 20% 20% 20% 20%
cards:
- type: vertical-stack
cards:
- type: custom:button-card
entity: scene.scena_buonanotte
color: auto
name: Buonanotte
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.scena_buonanotte
view_layout:
grid-column: 1 / 2;
grid-row: 1 / 2;
- type: custom:button-card
entity: scene.scena_buonanotte
color: auto
name: Buonanotte
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.scena_buonanotte
view_layout:
grid-column: 1 / 2;
grid-row: 2 / 3;
- type: horizontal-stack
cards:
- type: custom:button-card
entity: scene.scena_buonanotte
color: auto
name: Buonanotte
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.scena_buonanotte
view_layout:
grid-column: 2 / 3;
grid-row: 1 / 3;
But i have this output:
Maybe i solved the problem of columns/rows placing, but why i can’t make the last button to occupy two rows?
Please note that it’s just an example, so i’m not really interested in making this specific layout but rather learning how to place and enlarge this entities inside a view.
Thanks in advance