Custom Layout Cards - Problems Getting Cards to Map to Correct Grids

OK, I’ve been fighting with this for about a week and a half and obviously need some guidance.

Basically, I want to create a Home screen that will reside on an iPad mounted on the wall. (I may use Apple’s Home Assistant native app in kiosk mode, or simply a browser - yet TBD.)

I’m looking to layout three rows and three columns, containing:
Row 1: (weather) (Stacked card with numerous light cards) (Nest thermostat status)
Row 2: (Something, probably wx radar), (Stacked card with various door states/controls), Media
Row 3 : (A few-pixel-height window for alerts, such as Ring doorbell pressed, etc.)

My home card (under development) is a single panel, that contains the declaration:

layout: (correctly indented, of course)
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: auto;
grid-template-area: |
“weather lights temps”
“radar doors media”
“alerts alerts alerts”
justify-items: stretch
rtl: false
padding: 5px

Each of the cards has
view_layout:
grid-area: doors (or weather, or one of the other pre-defined areas)

However, the result are:

  • Weather (which should be in column1, row 1) completely disappears and is replaced by Lights (which should be in column 2)
  • Doors and Media are in the correct rows, but appear on top of each other in column 3 !!

Any guidance would be appreciated.

I did it differently, used dashboard in vertical layout and added break-card (custom:layout-break) and by moving them up/down, then it splits nicely as I want it