Grid render cast to chrome cast can't fill rightmost column

[shettich]

My Home Assistant version: 2024.3.3

Layout-card version (FROM BROWSER CONSOLE): 2.4.5

What I am doing:

Casting a Grid based dashboard view to a chrome cast, connected to a 4K (LG) tv

What I expected to happen:

Render the whole row

What happened instead:

With 3 of 4 columns populated: renders
With all 4 populated: black screen

Both render fine in Safari under all sorts of window re-sizing

Minimal steps to reproduce:

title: Grid cast bug
views:
  - title: bug-repro
    path: repro
    type: custom:grid-layout
    layout:
      grid-template-columns: repeat(3,auto)
      grid-template-rows: auto
      grid-template-areas: |
        "r1c1 r1c2 r1c3"
        "r2c1 r2c2 r2c3"
    cards:
    - type: markdown
      view_layout:
        grid-area: r1c1
      content: '## Placeholder'
    - type: markdown
      view_layout:
        grid-area: r1c2
      content: '## Placeholder'
    - type: markdown
      view_layout:
        grid-area: r1c3
      content: '## Placeholder'```

With all 3 cards you get a black window, if you remove the last one it renders

Also, if you change them to be gauge cards (I can't see how to use a constant, so you need a valid entity) it will move the 3rd card (should be r1c3) down to r2c1 leaving r1c3 blank

If you have any tips on how to get more debug info out of the chromecast I'm happy to work on that and tinker some more

Error messages from the browser console:

N/A

---

**By putting an X in the boxes ([X]) below, I indicate that I:**

- [X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
- [X] Have made sure I am using the latest version of the plugin.
- [] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
- [X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[jm-cook]

I have this problem where nothing displays at all on google nest when using the grid layout card. I tried this example and even if I remove the last entity as described above, still nothing is displayed.

Looking through the issues and googling, it seems that this problem has been around for some time and not resolved yet :-(

There is some information about remote debugging cast applications here:

https://developers.google.com/cast/docs/debugging/remote_debugger

[jm-cook]

I believe the solution is to place a grid-layout inside a panel. I tried modifying your example @shettich and got it to work ((ie cast successfully to my nest hub) like this:

views:
  - type: panel
    title: test
    path: test
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: repeat(3,auto)
          grid-template-rows: auto
          grid-template-areas: |
            "r1c1 r1c2 r1c3"
            "r2c1 r2c2 r2c3"
        cards:
          - type: markdown
            view_layout:
              grid-area: r1c1
            content: '## Placeholder'
          - type: markdown
            view_layout:
              grid-area: r1c2
            content: '## Placeholder'
          - type: markdown
            view_layout:
              grid-area: r1c3
            content: '## Placeholder'