CSS grid - Can't figure out how it works

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:
Schermata 2022-12-01 alle 23.28.48

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

1 Like