Multiple Columns issue

Configuration Frontend
1

I am trying to make my home page have 3 columns. I would like HACS information in col1, Weather in col2, & Tracking in col3. I have tried to update the yaml file but that did not work and I tried HACS layout option with no luck. Below is an image of the main screen and then the code that works with this view and the yaml code that breaks my view.

Screenshot 2022-11-16 165737
Screenshot 2022-11-16 1657371568×607 30.6 KB

Working Code

title: Home
views:
  - theme: Backend-selected
    title: Home
    path: home
    icon: mdi:home
    badges: []
    cards:
      - type: entities
        entities:
          - entity: sensor.hacs
      - type: grid
        square: false
        columns: 1
        cards:
          - type: weather-forecast
            entity: weather.home
            show_forecast: false
          - type: entities
            entities:
              - entity: sensor.home_cloud_ceiling
                name: Cloud ceiling
              - entity: sensor.home_precipitation
                name: Precipitation
              - entity: sensor.home_pressure_tendency
                name: Pressure tendency
              - entity: sensor.home_realfeel_temperature
                name: RealFeel temperature
              - entity: sensor.home_uv_index
                name: UV index
              - entity: sensor.home_wind
                name: Wind
            title: Home
      - type: entities
        entities:
          - entity: device_tracker.john
          - entity: device_tracker.hanna
          - entity: device_tracker.elliott

Non working code

title: Home

views:

  - theme: Backend-selected

    title: Home

    path: home

    icon: mdi:home

    type: custom:grid-layout

    layout:

      grid-template-columns: 33% 34% 33%

      grid-template-areas: |

        "col1 col2 col3"

    badges: []

    cards:

      - #col1

        type: entities

        view_layout:

          grid-area: col1

        entities:

          - entity: sensor.hacs

      - type: grid

        view_layout:

          grid-area: col2

        square: false

        columns: 1

        cards:

          - type: weather-forecast

            entity: weather.home

            show_forecast: false

          - type: entities

            entities:

              - entity: sensor.home_cloud_ceiling

                name: Cloud ceiling

              - entity: sensor.home_precipitation

                name: Precipitation

              - entity: sensor.home_pressure_tendency

                name: Pressure tendency

              - entity: sensor.home_realfeel_temperature

                name: RealFeel temperature

              - entity: sensor.home_uv_index

                name: UV index

              - entity: sensor.home_wind

                name: Wind

            title: Home

      - type: entities

        view_layout:

          grid-area: col3

        entities:

          - entity: device_tracker.john

          - entity: device_tracker.hanna

          - entity: device_tracker.elliott
2

You can use the vertical stack card.

1 Like
3

Thank you that worked perfect.

2 Likes