Adjusting the height of cards

Configuration Frontend
1

I am trying to create a grid layout with layout-card, where i have 5 columns and 2 rows. I want both rows to be the exact same height, and fill out the screen, but for some reason I can’t adjust the height of the grid layout.

The top one, is the layout I’m trying to create, and the bottom one is how it looks now.

layout2
layout2570×742 473 Bytes

This is my code:

  - title: Kitchen Homescreen
    path: kitchen-homescreen
    icon: mdi:pot-mix
    type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 20% 20% 20% 20% 20%
      grid-template-rows: 50% 50%
      grid-template-areas: |
        "poster poster calendar calendar calendar"
        "poster poster music todolist recipe"
      justify-items: stretch
    badges: []
    cards:
      - type: weather-forecast
        entity: weather.home
        view_layout:
          grid-area: poster
        show_forecast: true
      - type: media-control
        entity: media_player.sonos_living_room
        view_layout:
          grid-area: music
      - type: custom:todoist-card
        show_completed: 5
        entity: sensor.to_do_list
        view_layout:
          grid-area: todolist
        show_item_delete: true
        show_item_close: true
        show_item_add: true
        show_header: true
        only_today_overdue: false
      - type: calendar
        entities:
          - calendar.xxxxxxxxx
        view_layout:
          grid-area: calendar

How can I achieve this?

1 Like
2

well first off, you’re over complicating your setup a bit

      grid-template-columns: 40% 20% 20% 20%
      grid-template-rows: 50% 50%
      grid-template-areas: |
        "poster calendar calendar calendar"
        "poster music todolist recipe"

secondly, does your view have panel: True set?

3

Ah, yes I can see that now, thanks :grinning_face_with_smiling_eyes:

No, I do not have panel set to True.

I might have found the solution now, I added:
height: calc(100vh - 60px);
to my layout, where the 60 is the top panel (56px) and a margin of (4px). But I’m not sure if it’s the best solution, if the top panel might change size.

    layout:
      grid-template-columns: 40% 20% 20% 20%
      grid-template-rows: 50% 50%
      grid-template-areas: |
        "poster calendar calendar calendar"
        "poster music todolist recipe"
      justify-items: stretch
      height: calc(100vh - 60px);