Multiple controls in the same grid area not working

[MikeGuest]

My Home Assistant version: 2021.11.5

Layout-card version (FROM BROWSER CONSOLE): 2.3.1

What I am doing:

I separate my yaml lovelace files into dashboard, panel, and tiles files using includes (for re-usability of forms within different dashboards). the dashboards are defined in configuration.yaml

What I expected to happen:

both buttons displayed in the grid on 1 row, one 50px (home1) and one at 100px (home2)

What happened instead:

I see only home2 at 100px - adding additional buttons shows only the last defined button of that type If separate areas are defined (test1, test2) then the buttons display separately as expected. The docs suggest to me that I shouldn't need to do this however.

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error

configuration.yaml

lovelace:
  mode: storage
  resources:
    - url: www/kiosk-mode/kiosk-mode.js
      type: module
  [...]
  dashboards:
  [...]
    lovelace-l-panel-test:
      mode: yaml
      title: l-panel-test
      icon: mdi:script
      show_in_sidebar: true
      filename: /config/lovelace/dashboards/lovelace-l-panel test custom.yaml

dashboards/lovelace-l-panel test custom.yaml

title: Main
theme: Github Dark Theme
badges: []
cards: !include /config/lovelace/tiles/l-menu-test.yaml

tiles/l-menu-test.yaml

- type: custom:layout-card
  layout_type: grid
  layout:
    grid-template-columns: 50px 100px
    grid-template-rows: auto
    grid-template-areas: |
      "test test"

  cards:
    - type: button
      icon: 'hass:home'
      name: Home1
      view_layout:
        grid-area: test

    - type: button 
      icon: 'hass:home'
      name: Home2
      view_layout:
        grid-area: test

End of code

Error messages from the browser console: not sure where to find this - can't see anything in the homeassistant logs. No errors visible on the screen - just buttons that don't render

---

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.
• [x] 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.

[tgallacher]

👋

I think you just need to change your layout_type in the tiles/l-menu-test.yaml file from:

- type: custom:layout-card
  layout_type: grid
  layout:
    ...
  cards:

to

- type: custom:layout-card
  layout_type: custom:grid-layout
  layout:
    ...
  cards:

p.s. spaces in files names can be unpredictable depending on the operating system. Best to always use _ or - instead.

[thomasloven]

CSS grids do not support putting multiple elements in the same grid area.