I do not believe it is possible to do it with the standard functionality provided by HA today, but there may be a single card (or something else) that allows such placement (a grid, and then placement of cards on this grid). It would be similar to several web frontend libraries such as Bootstrap.
It does not have to be visual, I can write YAML. It does not have to be all cooked in, I can write flexbox or grid. Of course, ideally that would be a visual grid where I resize the placements and fill in YAML code. But this is in the “wow” section.
How would it be best to approach this today, with the state of HA frontend as of 2025?
If you can’t find something custom to do this you might be able to fill the blank squares on your grid with empty buttons. You can define a theme to make their background and borders transparent. I have something like this (less complex than yours):
You can easily accomplish this using custom layout card: thomasloven/lovelace-layout-card: Get more control over the placement of lovelace cards. and using it in grid mode and for best result put in dashboard defined as panel (to occupy entire screen real estate). Then you simply define grid (in your case 10x6), name properly grid cells and assign these cells to your card by defined name. Cards are placed within custom layour card. So code would look like:
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%
grid-template-rows: auto auto auto auto auto
grid-template-areas: |
"1 1 1 a a 2 2 b 3 3"
"1 1 1 c c c c c c c"
"d d d d d 4 4 4 e e"
"5 5 5 f f 4 4 4 g g"
"h h h h h 4 4 4 i i"
"j j 6 7 8 k k k k k"
cards:
- type: your card of choice 1
view_layout:
grid-area: 1
..... # card config
- type: your card of choice 2
view_layout:
grid-area: 2
..... # card config
- type: your card of choice 3
view_layout:
grid-area: 3
..... # card config
Areas named with letters are just slack, areas marked with numbers corresponds to cells where you want to put your cards. You probably would need to experiment with cell sizez (in my example alll horizontal are 10% of entire card width, while vertically are aligned to largest card in the row. You might define this in px, fr or so perhaps. Card documentation is your friend here.
Get more control over the placement of lovelace cards.