🔹 Layout-card - Take control of where your cards end up

Share your Projects! Dashboards & Frontend
347

Hi,
unfortunately i used layout card in different ways in a lot of different views. Now I have a lot of work todo with the update. Mostly i get it working, but with some special points i’m confused and I need some further testing. But one simple thing i can’t figure out what is wrong. I hope you can help me with the “main allignment”:

The allignment of the complete layout-card is left and I can’t figure out how to center it. Also if i set panel to false it is not centered (with “panel: false” it’s a little bit right of the center).
Here is a screenshot and the relevant part of the code (I deleted style-, elements- and card-content for better readability):

EDIT: I changed it now to vertical-layout (which seems to work good in this case, but i think i will get the same allignment issue with other cards where i definetly need the grid layout. Therefore I still need your help)

1
12544Ă—1291 181 KB

title: vacuum_new
panel: true
background: center / cover no-repeat url("/local/background/white_03.jpg") fixed
icon: mdi:robot-vacuum
cards:    

  - type: custom:layout-card
    layout_type: grid-layout
    layout:
      grid-template-columns: 510px 495px
      grid-template-rows: 119px 98px auto auto auto

    cards:

####################################################################
      - type: picture-elements
        view_layout:
          grid-column: 1 / 2
          grid-row: 1 / 2
        style: |
        # DELETED
        image: /local/roborock/logo_background_07.png
        elements:
        # DELETED

####################################################################
      - type: picture-elements
        view_layout:
          grid-column: 1 / 2
          grid-row: 2 / 4
        style: |
        # DELETED
        image: /local/roborock/vacuum_plan_09.png
        elements:
        # DELETED

####################################################################
      - type: picture-elements
        view_layout:
          grid-column: 1 / 2
          grid-row: 4 / 5
        style: |
        # DELETED
        image: /local/roborock/Roborock_view_15.png
        elements:
        # DELETED

####################################################################
      - type: picture-elements
        view_layout:
          grid-column: 2 / 3
          grid-row: 1 / 3
        style: |
        # DELETED
        image: /local/roborock/remote_background_06.png
        elements:
        # DELETED

####################################################################
      - type: horizontal-stack
        view_layout:
          grid-column: 2 / 3
          grid-row: 3 / 6
        cards:
        # DELETED
3 Likes