Custom:grid-layout doesn't use full height

Configuration Frontend
1

Hello,

I wanted to test custom:grid-layout, but i cant get it running.

Why does the grid not fill up the whole space?

image
image1059Ă—899 7.97 KB

type: custom:grid-layout
path: screensaver
title: test
subview: true
cards:
  - type: markdown
    content: main
    view_layout:
      grid-area: main
  - type: markdown
    content: footer1
    view_layout:
      grid_area: footer1
  - type: markdown
    content: footer2
    view_layout:
      grid_area: footer2
  - type: markdown
    content: footer3
    view_layout:
      grid_area: footer3
layout:
  grid-template-colums: 33% 33% 33%
  grid-template-rows: 80% 20%
  grid-template-areas: |
    "main main main"
    "footer1 footer2 footer3"
2

Comment this line to see what happens. Currently the card is not supposed to fill a whole view. You need to tell it this by card-mod or just by:

layout:
  ...
  height: 100%
1 Like
3

Thank you. I thought I tried this already but I had a typo grid_area instead of grid-area.
Now it works with the “markdown” cards but I can’t get the custom:media-source-image-card fit into the grid. It always breaks the grid.

I tried to but the image-card into a custom:stack-in-card.
Can you see why the image exceeds the “main” grid-area?

image
image1324Ă—902 11.3 KB

type: custom:grid-layout
path: screensaver
title: test
subview: false
cards:
  - type: markdown
    content: footer2
    view_layout:
      grid-area: footer2
  - type: markdown
    content: footer1
    view_layout:
      grid-area: footer1
  - type: markdown
    content: footer3
    view_layout:
      grid-area: footer3
  - type: custom:stack-in-card
    mode: vertical
    height: 100%
    width: 100%
    cards:
      - type: custom:media-source-image-card
        image: >
          media-source://media_source/local/fullykiosk/{{ '%03d' % range(1, 523)
          | random }}.JPG
        apply_grayscale: false
        forced_refresh_interval: 145
        object_fit: cover
        card_mod:
          style: |
            ha-card {
              height: 100%;
              width: 100%;
            }
    view_layout:
      grid-area: main
layout:
  grid-template-columns: 33% 33% 33%
  grid-template-rows: 80% 20%
  grid-template-areas: |
    "main main main"
    "footer1 footer2 footer3"
  height: 100%
  display: block
4

I do not have this custom card. Replace it with a standard Picture entity card to see what happens.

Also:

  1. What is the point of placing a card into stack-in-card here? Was it done only to allow using card-mod for that “custom:media…” card since it (just a guess) does not have own ha-card element?
  2. Options “weight/height” does not belong to stack-in-card.
5

I tried to use the custom:stack-in-card as a kind of a wrapper.
Thought I did this before but you are right the custom:stack-in-card has no height/width.

With a normal picture entity card I get the result from the beginning. The grid doesn’t fill up the whole space…

image
image951Ă—617 11.5 KB

type: custom:grid-layout
path: screensaver
title: test
subview: false
height: 90%
cards:
  - type: markdown
    content: footer2
    view_layout:
      grid-area: footer2
  - type: markdown
    content: footer1
    view_layout:
      grid-area: footer1
  - type: markdown
    content: footer3
    view_layout:
      grid-area: footer3
  - type: picture
    image:
      media_content_id: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
    image_entity: image.lenovo_tab_m11_bildschirmfoto
layout:
  grid-template-columns: 33% 33% 33%
  grid-template-rows: 80% 20%
  grid-template-areas: |
    "main main main"
    "footer1 footer2 footer3"
6

A bit unrelated, but why do you specify both options?