Help understanding custom layout-card grid-layout

Hi, I’m fairly new to layout-card and grid-layout custom cards.
I followed different posts on the subject but fail to achieve my dashborad cards placement.
Too keep it simple, I’d like to have a view with 3x3 cards.
I tried the following code:

views:
  - type: panel
    path: grid-layout-card
    title: Grid Layout
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 33% 33% 33%
          grid-template-rows: auto auto auto
          grid-template-areas: |
            "1 2 3"
            "4 5 6"
            "7 8 9"
        cards:
          - type: custom:mushroom-title-card
            title: '2'
            view_layout:
              grid-area: 2
          - type: custom:mushroom-title-card
            title: '1'
            view_layout:
              grid-area: 1
          - type: custom:mushroom-title-card
            title: '3'
            view_layout:
              grid-area: 3
          - type: custom:mushroom-title-card
            title: '4'
            view_layout:
              grid-area: 4
          - type: custom:mushroom-title-card
            title: '5'
            view_layout:
              grid-area: 5
          - type: custom:mushroom-title-card
            title: '6'
            view_layout:
              grid-area: 6
          - type: custom:mushroom-title-card
            title: '7'
            view_layout:
              grid-area: 7
          - type: custom:mushroom-title-card
            title: '8'
            view_layout:
              grid-area: 8
          - type: custom:mushroom-title-card
            title: '9'
            view_layout:
              grid-area: 9

I’m expecting a matrix of 3x3, but all I get is all cards lined up in a single left column.
I have latest versions of everything.
Can someone please help me with this?
Thanks.