Custom Layout Card - Grid layout. Please help

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

1 Like

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?

The first thing I see is this:

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

2 Likes

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

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.

1 Like

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. :slight_smile:.

1 Like

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.

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

1 Like

have you find a solution? i’m interested too

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  .       .       .       .      "

1 Like

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!

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

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

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

1 Like

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

Hello Andy,

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

Regards,

Kwame

I am trying to build a simple dashboard but struggling with the layout design. One of my camera is wide angle and it needs bit of a space. I am using layout card. The first two columns (weather and camera) works great but not sure how to align the bottom room cards. The moment add cards to column 3, it extends with the camera card.

grid-template-columns: 10% 30% 50% 10%
grid-template-rows: auto
grid-template-areas: |
“h1 h2 h3 h4”

this is what I want to create:

I tried to separate the last two rows for the room cards with custom-layout but no luck.

Any suggestions please? Thanks

try something lke that:

type: custom:layout-card
layout_type: grid
layout_options:
  grid-template-columns: 5% 33.3% 33.3% 33.3% 5%
  grid-template-rows: auto auto auto
  grid-template-areas: |
    "s1 weather camera camera s2"
    "s1 room1 room2 room3 s2"
    "s1 room4 room5 room6 s2"

This assumes you want to have each card to take 30% of page width and have small margins left on left and righ side of the screen. In grid definition these are represented by s1 and s2. Do not forget to put into your actual cards information about their placement in respective cells.

cards:
  - type: your camera card type
    view_layout:
      grid-area: camera
    . . .

Layout_option didn’t work for me so I changed back to layout: and it worked a like charm :slight_smile:
I also made a few minor adjustments to the column percentages and everything seems to work as I expected. Thank you Mirek.

Working code for me:
type: custom:grid-layout
layout_type: grid
layout:
grid-template-columns: 5% 30% 30% 30% 5%
grid-template-rows: auto auto auto
grid-template-areas: |
“s1 weather camera camera s2”
“s1 room1 room2 room3 s2”
“s1 room4 room5 room6 s2”