Custom Layout Card - Grid layout. Please help

[Maximusi (Max)]

Afternoon everyone,

I know I am really thick and I appologise ahead of time but I am really not understanding how to create my dashboard how I want and I was wonderinf if I could please have some advice.

I am trying to create a dashboard for work that has a banner across the top, and optional banner underneath depending on a input boolean and then 3 or 4 columns below (haven’t decided yet)

Here is a crude paint drawing of what I would like to achieve.

This is the yaml code I have currently but nothing is displayed:

type: custom:grid-layout
layout:
  grid-template-columns: 33% 33% 33%
  grid-template-rows: auto
  grid-template-areas: |
    "header header header"
    "main main2 main3"
cards:
  - type: picture
    tap_action:
      action: none
    hold_action:
      action: none
    image: https://hass.local:8123/local/Logo.png
    view_layout:
      grid-area: header
  - type: sensor
    entity: sensor.speedtest_ping
    graph: line
    hours_to_show: 48
    detail: 2
    name: Internet Ping
    view_layout:
      grid-area: main
  - type: sensor
    entity: sensor.speedtest_download
    graph: line
    name: Download Speed
    hours_to_show: 48
    detail: 2
    view_layout:
      grid-area: main2
  - type: sensor
    entity: sensor.speedtest_upload
    graph: line
    name: Upload Speed
    hours_to_show: 48
    detail: 2
    view_layout:
      grid-area: main3

Pretty please I need help!

[rossk]

Post deleted…just re-read the documentation and my suggestion was wrong

[juaigl]

first line change type to custom:layor-card and add layout type

type: custom:layout-card
layout_type: grid

Edit:
For header use a vertical stack card, with fixed picture in first position and conditional card in second position.

Full example, replace entities names:

type: custom:layout-card
layout_type: grid
layout:
  grid-template-columns: 33% 33% 33%
  grid-template-rows: auto
  grid-template-areas: |
    "header header header"
    "main main2 main3"
cards:
  - type: vertical-stack
    cards:
      - type: picture
        image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
        tap_action:
          action: none
        hold_action:
          action: none
      - type: conditional
        conditions:
          - entity: input_boolean.vacuum_floorplan_hall_selected
            state: 'on'
        card:
          type: picture
          image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
          tap_action:
            action: none
          hold_action:
            action: none
    view_layout:
      grid-area: header
  - type: sensor
    entity: sensor.airpurifier_aqi
    graph: line
    hours_to_show: 48
    detail: 2
    name: Internet Ping
    view_layout:
      grid-area: main
  - type: sensor
    entity: sensor.airpurifier_aqi
    graph: line
    name: Download Speed
    hours_to_show: 48
    detail: 2
    view_layout:
      grid-area: main2
  - type: sensor
    entity: sensor.airpurifier_aqi
    graph: line
    name: Upload Speed
    hours_to_show: 48
    detail: 2
    view_layout:
      grid-area: main3

Also, for local pictures use local paths instead external ones like:

/local/Logo.png

instead of

https://hass.local:8123/local/Logo.png

Result

With input bolean activated

[Maximusi (Max)]

Thank you ever so much you have pointed me in the right direction and now I am customising to my heart is content!

[DeltaNu1142]

I realize that this is solved… however, I’m running into something similar and hoping I can get some guidance. I’ve just started down the path of grid cards. I’m attempting to create a layout resembling this:

…with this config:

views:
  - title: Main
    background: center / cover no-repeat url("/local/images/background2.jpg") fixed
    path: main_front_door_tablet
    icon: mdi:home-outline
    type: custom:grid-layout
    display: grid
    grid-template-columns: 100px 1fr 1fr
    grid-template-rows: auto 86px 86px 86px 86px 86px 86px 86px
    grid-template-areas: >-
      "header header header" "buttons center right" "buttons center right"
      "buttons center right" "buttons center right" "buttons center right"
      "buttons center right" "buttons center right"
    layout:
      width: 1200
      max_cols: 3
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: vertical-stack
            cards:
              - type: custom:digital-clock
                view_layout:
                  grid-area: header
                dateFormat:
                  weekday: long
                  day: 2-digit
                  month: long
                timeFormat:
                  hour: 2-digit
                  minute: 2-digit
              - type: horizontal-stack
                cards:
                  - type: vertical-stack
                    view_layout:
                      grid-area: buttons
                    cards:
                      - type: custom:button-card
                        name: Home
                        color_type: label-card
                        color: rgba(7, 103, 215)
                        styles:
                          card:
                            - width: 85px
                            - height: 85px
                        tap_action:
                          action: navigate
                          navigation_path: /front-door-tablet/main_front_door_tablet
                      - type: custom:button-card
                        name: Weather
                        color_type: label-card
                        color: rgba(51, 72, 111, 0.24)
                        styles:
                          card:
                            - width: 85px
                            - height: 85px
                        tap_action:
                          action: navigate
                          navigation_path: /front-door-tablet/weather_front_door_tablet
                      - type: custom:button-card
                        name: Lights
                        color_type: label-card
                        color: rgba(51, 72, 111, 0.24)
                        styles:
                          card:
                            - width: 85px
                            - height: 85px
                        tap_action:
                          action: navigate
                          navigation_path: /front-door-tablet/lights_front_door_tablet
                      - type: custom:button-card
                        name: Calendar
                        color_type: label-card
                        color: rgba(51, 72, 111, 0.24)
                        styles:
                          card:
                            - width: 85px
                            - height: 85px
                        tap_action:
                          action: navigate
                          navigation_path: /front-door-tablet/calendar_front_door_tablet
                      - type: custom:button-card
                        name: Cameras
                        color_type: label-card
                        color: rgba(51, 72, 111, 0.24)
                        styles:
                          card:
                            - width: 85px
                            - height: 85px
                        tap_action:
                          action: navigate
                          navigation_path: /front-door-tablet/camera_front_door_tablet
                      - type: custom:button-card
                        name: Pool
                        color_type: label-card
                        color: rgba(51, 72, 111, 0.24)
                        styles:
                          card:
                            - width: 85px
                            - height: 85px
                        tap_action:
                          action: navigate
                          navigation_path: /front-door-tablet/pool_front_door_tablet
                      - type: custom:button-card
                        name: Mail
                        color_type: label-card
                        color: rgba(51, 72, 111, 0.24)
                        styles:
                          card:
                            - width: 85px
                            - height: 85px
                        tap_action:
                          action: navigate
                          navigation_path: /front-door-tablet/mail_front_door_tablet
                  - type: vertical-stack
                    view_layout:
                      grid-area: center
                    cards:
                      - type: custom:weather-card
                        entity_weather: weather.dark_sky
                        entity_sun: sun.sun
                        entity: weather.dark_sky
                        name: null
                      - type: iframe
                        url: >-
                          https://xxxxxx-weather-site
                        aspect_ratio: 60%
                  - type: vertical-stack
                    view_layout:
                      grid-area: right
                    cards:
                      - type: horizontal-stack
                        cards:
                          - type: custom:button-card
                            entity: lock.front_door_lock
                            template: standard
                            name: Front Door
                            tap_action:
                              action: none
                            hold_action:
                              action: toggle
                            styles:
                              card:
                                - width: null
                                - height: 80px
                            state:
                              - value: locked
                                icon: mdi:lock
                                color: rgb(0, 128, 0)
                              - value: unlocked
                                icon: mdi:lock-open
                                color: rgb(255, 0, 0)
                          - type: custom:button-card
                            entity: lock.garage_entry_door_lock_current_lock_mode
                            template: standard
                            name: Garage Entry Door
                            tap_action:
                              action: none
                            hold_action:
                              action: toggle
                            styles:
                              card:
                                - width: null
                                - height: 80px
                            state:
                              - value: locked
                                icon: mdi:lock
                                color: rgb(0, 128, 0)
                              - value: unlocked
                                icon: mdi:lock-open
                                color: rgb(255, 0, 0)
                      - type: horizontal-stack
                        cards:
                          - type: custom:button-card
                            entity: cover.garage_door_1
                            template: standard
                            name: Garage Door 1
                            tap_action:
                              action: none
                            hold_action:
                              action: toggle
                            styles:
                              card:
                                - width: null
                                - height: 80px
                            state:
                              - value: closed
                                icon: mdi:garage
                                color: rgb(0, 128, 0)
                              - value: open
                                icon: mdi:garage-open
                                color: rgb(255, 0, 0)
                              - value: opening
                                icon: mdi:garage-alert
                                color: rgb(255, 255, 0)
                              - value: closing
                                icon: mdi:garage-alert
                                color: rgb(255, 255, 0)
                          - type: custom:button-card
                            entity: cover.garage_door_2
                            template: standard
                            name: Garage Door 2
                            tap_action:
                              action: none
                            hold_action:
                              action: toggle
                            styles:
                              card:
                                - width: null
                                - height: 80px
                            state:
                              - value: closed
                                icon: mdi:garage
                                color: rgb(0, 128, 0)
                              - value: open
                                icon: mdi:garage-open
                                color: rgb(255, 0, 0)
                              - value: opening
                                icon: mdi:garage-alert
                                color: rgb(255, 255, 0)
                              - value: closing
                                icon: mdi:garage-alert
                                color: rgb(255, 255, 0)

However, no matter what I try, I end up with three, equal-width columns. What am I doing wrong?

[CoyoteSequoia]

The first thing I see is this:

@DeltaNu1142

    layout:
      width: 1200
      max_cols: 3

Try removing it.

[DeltaNu1142]

@CoyoteSequoia

Try removing it.

Thanks, but I found my error - my problem was that all of the grid defining I was doing was within a vertical stack of its own. In the last few days, I’ve learned a lot about CSS grids. Here’s what I’ve got currently:

a

[charlie412 (Charlie)]

What was the YAML that you ended up getting this running with? I’m just starting out on this grid journey.

[DeltaNu1142]

Sorry, just getting back to this. Here’s what I used:

  - visible:
      - user: xxxx
      - user: xxxx
    type: custom:grid-layout
    title: Front Door Camera
    icon: mdi:video-outline
    background: center / cover no-repeat url("/local/images/background3.jpg") fixed
    path: front_door_camera_front_door_tablet
    layout:
      grid-template-rows: 80px 640px 80px
      grid-template-columns: 93px 1184px
      grid-template-areas: '"header header" "buttons main1" "footer footer"'
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: conditional
            conditions:
              - entity: input_boolean.pool_open
                state: 'on'
            card:
              type: vertical-stack
              cards:
                - type: custom:button-card
                  name: Home
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:home
                  styles:
                    card:
                      - width: 80px
                      - height: 72px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/main_front_door_tablet
                - type: custom:button-card
                  name: Lights
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:lightbulb
                  styles:
                    card:
                      - width: 80px
                      - height: 72px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/lights_front_door_tablet
                - type: custom:button-card
                  name: Cameras
                  color_type: label-card
                  color: rgba(7, 103, 215)
                  icon: mdi:video
                  styles:
                    card:
                      - width: 80px
                      - height: 72px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/front_door_camera_front_door_tablet
                - type: custom:button-card
                  name: Media
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:speaker
                  styles:
                    card:
                      - width: 80px
                      - height: 72px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/media_front_door_tablet
                - type: custom:button-card
                  name: Pool
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:pool
                  styles:
                    card:
                      - width: 80px
                      - height: 72px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/pool_front_door_tablet
                - type: custom:button-card
                  name: Weather
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:weather-partly-cloudy
                  styles:
                    card:
                      - width: 80px
                      - height: 72px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/weather_front_door_tablet
                - type: custom:button-card
                  name: Energy
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:flash
                  styles:
                    card:
                      - width: 80px
                      - height: 72px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/energy_front_door_tablet
                - type: custom:button-card
                  name: Mail
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:mailbox
                  styles:
                    card:
                      - width: 80px
                      - height: 72px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/mail_front_door_tablet
                - type: custom:button-card
                  name: Calendar
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:calendar-clock
                  styles:
                    card:
                      - width: 80px
                      - height: 72px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/calendar_front_door_tablet
          - type: conditional
            conditions:
              - entity: input_boolean.pool_open
                state: 'off'
            card:
              type: vertical-stack
              cards:
                - type: custom:button-card
                  name: Home
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:home
                  styles:
                    card:
                      - width: 80px
                      - height: 80px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/main_front_door_tablet
                - type: custom:button-card
                  name: Lights
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:lightbulb
                  styles:
                    card:
                      - width: 80px
                      - height: 80px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/lights_front_door_tablet
                - type: custom:button-card
                  name: Cameras
                  color_type: label-card
                  color: rgba(7, 103, 215)
                  icon: mdi:video
                  styles:
                    card:
                      - width: 80px
                      - height: 80px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/front_door_camera_front_door_tablet
                - type: custom:button-card
                  name: Media
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:speaker
                  styles:
                    card:
                      - width: 80px
                      - height: 80px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/media_front_door_tablet
                - type: custom:button-card
                  name: Weather
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:weather-partly-cloudy
                  styles:
                    card:
                      - width: 80px
                      - height: 80px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/weather_front_door_tablet
                - type: custom:button-card
                  name: Energy
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:flash
                  styles:
                    card:
                      - width: 80px
                      - height: 80px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/energy_front_door_tablet
                - type: custom:button-card
                  name: Mail
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:mailbox
                  styles:
                    card:
                      - width: 80px
                      - height: 80px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/mail_front_door_tablet
                - type: custom:button-card
                  name: Calendar
                  color_type: label-card
                  color: rgba(7, 103, 215, 0.24)
                  icon: mdi:calendar-clock
                  styles:
                    card:
                      - width: 80px
                      - height: 80px
                  tap_action:
                    action: navigate
                    navigation_path: /front-door-tablet/calendar_front_door_tablet
        view_layout:
          grid-area: buttons
      - type: vertical-stack
        cards:
          - type: picture-entity
            entity: camera.xxxx
            name: Front Door
            show_name: true
            show_state: false
            camera_image: camera.xxxx
            tap_action:
              action: navigate
              navigation_path: /front-door-tablet/main_front_door_tablet
            aspect_ratio: '1.78'
        view_layout:
          grid-area: main1
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                entity: sensor.time_formatted
                show_state: true
                show_name: false
                show_icon: false
                name: ''
                color_type: label-card
                color: rgba(7, 103, 215, 0.00)
                styles:
                  card:
                    - background-color: rgba(7, 103, 215, 0.00)
                    - padding: 2%
                    - box-shadow: none
                  state:
                    - color: white
                    - font-size: 40px
                    - text-shadow: 0px 0px 3px black
                    - justify-self: left
                tap_action:
                  action: null
                hold_action:
                  action: null
              - type: custom:button-card
                entity: sensor.day_date_formatted
                show_state: true
                show_name: false
                show_icon: false
                name: ''
                color_type: label-card
                color: rgba(7, 103, 215, 0.00)
                styles:
                  card:
                    - background-color: rgba(7, 103, 215, 0.00)
                    - padding: 2%
                    - box-shadow: none
                  state:
                    - color: white
                    - font-size: 40px
                    - text-shadow: 0px 0px 3px black
                    - justify-self: right
                tap_action:
                  action: null
                hold_action:
                  action: null
        view_layout:
          grid-area: header

There are two conditional cards that show the entire group of relevant buttons based on whether the pool is open or closed. I’m sure there’s a better way to do that. I also didn’t use any style templates in here, and that’s something I want to get into soon.

[wjcarpenter (Bill Carpenter)]

I want to thank all the people who have gone to the trouble post working examples here. Like many other people, when I just got started with grid layouts, I found it very difficult to actually author the YAML correctly. (Don’t get me started about how tedious it is to do anything complex in YAML. It’s basically a dumb choice if humans have to interact with it.)

It seems that the grid layouts and HA may have separately evolved over time, but with some of the samples here, I was able to get things working today after wasting a bunch of time failing to create a configuration from scratch.

Thanks again to all who pitched in to help! (Even though you didn’t know I’d be coming along looking for that help months later. .

[Sandmman (Baz)]

Ok, nice to see this topic, I’m kinda stuck too…trying to create a wallpanel layout, but having issues with the sizing.

The layout is quite simple but I seem to keep running into problems whatever I try. The goal is a dashboard for a Tab7 Lite, the picture below gives an idea of the layout, layout blocks a to g, a divided in a1/a2+a3, the cblock in 4 or 5 rows, gblock spanning both rows.

views:
  - theme: Backend-selected
    title: Kiosk
    path: main
    icon: mdi:alarm-panel
    type: custom:grid-layout
    layout:
      grid-template-columns: 2fr 2fr 2fr 2fr 1fr
      grid-template-rows: 300px 300px
      grid-template-areas: |
        "ablock cblock eblock eblock gblock"
        "bblock dblock fblock fblock gblock"

The trouble lies with that I would expect that giving a grid-template-row of 50% 50% I would have the a nice even split, but I need to go to an exact 300px-300px (which will only work on the T7Lite), as to grid-template-columns, tried all sort of things, fractal seems to work. (Using it with row leaves a lot of screen estate unused)
It get’s worse when I try to subdivide a block as you can see in the picture

 cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 1fr 1fr
          grid-template-rows: 70% 30%
          grid-template-areas: |
            "a1block a1block"
            "a2block a3block"
        cards:
          - type: custom:layout-card
            cards:
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: sensor.klimaat_woonkmr_temperature
                show_state: true
                name: Temperatuur
            layout_type: custom:grid-layout
            layout:
              view_layout:
                grid-area: a1block
            view_layout:
              grid-area: a1block
          - type: custom:layout-card
            cards:  ...........

To me it seems I’m missing something.

[andyblac (Andy Blackburn)]

does anyone know how to control the gap between the grids ?, I want to stop this.

[Sbellins]

have you find a solution? i’m interested too

[andyblac (Andy Blackburn)]

yes, it was due to my sidebar layout being more rows than the rooms, i added extra rows in the room layout and is now fine.

  grid-template-areas: |
    "sidebar  room1   room2   room3   room4  "
    "sidebar  room5   room6   room7   room8  "
    "sidebar  room9   room10  room11  room12 "
    "sidebar  .       .       .       .      "
    "sidebar  .       .       .       .      "

[thamo]

Hi @andyblac, I know this is off-topic but your setup looks amazing! Would you mind sharing some details like the theme and what kind of cards you are using (especially those button cards for the rooms and that amazing weather forecast)? Thank you so much!

[andyblac (Andy Blackburn)]

hi, my custom cards are for the integration GitHub - UI-Lovelace-Minimalist/UI: UI-Lovelace-Minimalist is a "theme" for HomeAssistant and my cards are available here My Custom Cards for Minimalist UI

As for the weather it is using Clock Weather Card and Lovelace Hourly Weather

heres the code i use https://github.com/andyblac/HA_config_files/blob/ce7e0f219dda460bb3797fa3b97dfedd0f4f2ba1/ui_lovelace_minimalist/dashboard/main/sidebar.yaml#L5C1-L84C1

[thamo]

Thank you so much!! I’ll give it a go, we’ll see how my dashboard ends up looking

[andyblac (Andy Blackburn)]

i’ll be happy to help in my thread if you get stuck using my cards.

[ktakyi]

Hello Andyblac,
Happy new year to you Sir, I found this forum by chance and I am quite impressed about your dashboard.
I will like to have dashboard similar to yours, for example, the bedroom cards.

I tried everything but I am not able to reproduce your bedrooms cards showing various entities.

title: Bedroom
area: bedroom
hide_unavailable: false
tap_action:
  action: navigate
  navigation_path: /config/areas/area/bedroom
entities:
  - light.ceiling_light_2
  - light.bedroom_lights
  - switch.siren_alarm
  - switch.bedroom_fridge_socket_1
  - sensor.siren_battpercentage
  - sensor.kwame_s_echo_dot_next_alarm
  - binary_sensor.motion_sensor_occupancy
  - binary_sensor.bedroom_window_sensor_contact
  - binary_sensor.master_bedroom_door_contact

Could you please assist me with this?. I am a new home assistant and I have no coding background.
Your assistance will be extremely helpful.

Regards
Kwame

[ktakyi]

Hello Andy,

I wonder if you could please check my previous comment for me, Sir.

Regards,

Kwame