Layout-card - Grid help needed

Hi community,

I am trying to build my first minimalist dashboard using the grid-layout. I can however not wrap my head around this issue:

The light-card is overlapping the header and not shifting to the right grid-area

Can anybody help me along?

title: "Home"
path: "home"
type: custom:grid-layout
layout:
  grid-template-columns: 33% 33% 33%
  grid-template-rows: auto
  grid-template-areas: |
    " h1 h1 h1 "
    " m1 m2 m3 "
    " f1 f1 f1 "
badges: []

cards:
- type: horizontal-stack
  cards:
    - type: "custom:button-card"
      template: chip_navigate
      label: 'Home'
      variables:
        ulm_chip_navigate_path: /ui-lovelace-minimalist/home
        ulm_chip_navigate_icon: mdi:home
    - type: "custom:button-card"
      template: chip_navigate
      label: 'Woonkamer'
      variables:
        ulm_chip_navigate_path: /ui-lovelace-minimalist/test
        ulm_chip_navigate_icon: mdi:sofa-outline
        ulm_chip_navigate_icon_color: pink
        ulm_chip_navigate_label_color: pink
    - type: "custom:button-card"
      template: chip_navigate
      label: 'Keuken'
      variables:
        ulm_chip_navigate_path: /ui-lovelace-minimalist/home
        ulm_chip_navigate_icon: mdi:countertop-outline
    - type: "custom:button-card"
      template: chip_navigate
      label: 'Buiten'
      variables:
        ulm_chip_navigate_path: /ui-lovelace-minimalist/home
        ulm_chip_navigate_icon: mdi:flower-tulip-outline
    - type: "custom:button-card"
      template: chip_navigate
      label: 'Kantoor'
      variables:
        ulm_chip_navigate_path: /ui-lovelace-minimalist/home
        ulm_chip_navigate_icon: mdi:laptop
    - type: "custom:button-card"
      template: chip_navigate
      label: 'Slaapkamer'
      variables:
        ulm_chip_navigate_path: /ui-lovelace-minimalist/home
        ulm_chip_navigate_icon: mdi:bed-outline
    - type: "custom:button-card"
      template: chip_navigate
      label: 'Slaapkamer Amarr'
      variables:
        ulm_chip_navigate_path: /ui-lovelace-minimalist/home
        ulm_chip_navigate_icon: mdi:cradle-outline
    - type: "custom:button-card"
      template: chip_navigate
      label: 'Zolder'
      variables:
        ulm_chip_navigate_path: /ui-lovelace-minimalist/home
        ulm_chip_navigate_icon: mdi:home-roof
  view-layout:
    grid-area: h1

- type: custom:mushroom-light-card
  entity: light.signe
  use_light_color: true
  show_brightness_control: true
  show_color_temp_control: true
  show_color_control: true
  collapsible_controls: false
  name: Signe | tv staaf
  icon: hue:signe
  fill_container: true
  view-layout:
    grid-area: m3```

It has to be view_layout

:smiling_face:
sometimes is can be a very easy fix

Thanks a bunch!