Grid layout across the entire width

Share your Projects! Dashboards & Frontend
1

Hello there,

Bildschirmfoto vom 2023-11-04 21-54-51
Bildschirmfoto vom 2023-11-04 21-54-511916×971 42.2 KB

i am currently trying to build a dashboard with a sidebar and am currently working with layout card and grid.
I have now built a grid framework, which also works from the idea, but the individual tiles are compressed and not drawn over the entire width of the dashboard.
Does anyone know why?

- title: Heizung
    path: heizung
    icon: mdi:home-thermometer
    cards:
      - type: custom:layout-card
        layout_type: grid
        layout:
          margin: "10%;"
          grid-template-columns: auto 30%
          grid-template-rows: auto
          grid-template-areas: |
            "climate1 climate2 climate3"
            "climate4 climate5 climate6"
        cards:
          - type: custom:mushroom-climate-card
            entity: climate.buro
            fill_container: true
            show_temperature_control: true
            hvac_modes:
              - "off"
            collapsible_controls: true
            hold_action:
              action: none
            double_tap_action:
              action: none
            view_layout:
              grid-area: climate1
          - type: custom:mushroom-climate-card
            entity: climate.kuche
            fill_container: true
            show_temperature_control: true
            hvac_modes:
              - "off"
            collapsible_controls: true
            hold_action:
              action: none
            double_tap_action:
              action: none
            view_layout:
              grid-area: climate2
          - type: custom:mushroom-climate-card
            entity: climate.badezimmer
            fill_container: true
            show_temperature_control: true
            hvac_modes:
              - "off"
            collapsible_controls: true
            hold_action:
              action: none
            double_tap_action:
              action: none
            view_layout:
              grid-area: climate3
2

You need to put entire dashboard into panel mode to take entire screen rreal estate. As such your grid card can be then the only card in the dfashboard and all outher cards need to be placed within the grid.
Best practice would be also to define size of each column/row. In youd code you have grid-template-columns defined only for 2, but have 3 columns defined in grid-template-areas.
I’m also not sure about margin option… personally I just add the blank column to the grid, not placong any card there later on.

2 Likes