There are numerous ways to accomplish this, and the differences are pretty minor, I suspect for your use case. Basically 3 main choices are (in increasing order of difficulty in my opinion): basic component (e.g., the built-in row and column components), an html table, or an html grid.
Basic components:
Really, the break down you’ve got here is one row that has three columns in it, with the only wrinkle being that the middle column has two pieces (or, it’s own rows). That’s very easy to render with widget code:
uid: basicComponents
props:
parameterGroups: []
parameters: []
tags: []
component: f7-block
config:
slots:
default:
- component: f7-row
config:
style:
height: 150px
slots:
default:
- component: f7-col
config:
style:
height: 100%
border: solid red
slots:
default:
- component: Label
config:
text: Cell A
- component: f7-col
config:
style:
height: 100%
border: solid blue
slots:
default:
- component: f7-row
config:
style:
height: 50%
box-sizing: border-box
border: solid green
slots:
default:
- component: Label
config:
text: Cell B1
- component: f7-row
config:
style:
height: 50%
box-sizing: border-box
border: solid green
slots:
default:
- component: Label
config:
text: Cell B2
- component: f7-col
config:
style:
height: 100%
border: solid yellow
slots:
default:
- component: Label
config:
text: Cell C
The only tricky parts of this configuration are 1) making sure you change the box-sizing of the two middle cells just because of some of the default styles of the f7-row and columns and 2) making sure you have a height style set on the row that contains all the columns (or some other parent elements). If there is no explicit height style for a parent element then the percentage styles of the inner pieces will not have a number to be a percentage of.
Table:
You can use any standard html tags in addition to the component names as component so you can build an html table with a couple of rowspan attributes:
uid: htmlTable
props:
parameterGroups: []
parameters: []
tags: []
component: f7-block
config:
slots:
default:
- component: table
config:
slots:
default:
- component: tr
slots:
default:
- component: td
config:
rowspan: 2
style:
border: solid red
slots:
default:
- component: Label
config:
text: Cell A
- component: td
config:
style:
border: solid green
slots:
default:
- component: Label
config:
text: Cell B1
- component: td
config:
rowspan: 2
style:
border: solid yellow
slots:
default:
- component: Label
config:
text: Cell C
- component: tr
slots:
default:
- component: td
config:
style:
border: solid green
slots:
default:
- component: Label
config:
text: Cell B2
Unlike the previous option, you can get away without setting any explicit sizes here and the table will shrink to the minimum possible size that still contains all the cell elements.
Grid:
The grid offers an extraordinary amount of control of the ratios and placements and as a result of its complexity can be the most difficult to get right. However, when done correctly, it is by far the most concise of the options:
uid: htmlGrid
props:
parameterGroups: []
parameters: []
tags: []
component: f7-block
config:
slots:
default:
- component: div
config:
style:
display: grid
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: 1fr 1fr
grid-template-areas: >
'cellA cellB1 cellC'
'cellA cellB2 cellC'
slots:
default:
- component: Label
config:
text: Cell A
style:
grid-area: cellA
border: solid red
- component: Label
config:
text: Cell B1
style:
grid-area: cellB1
border: solid green
- component: Label
config:
text: Cell B2
style:
grid-area: cellB2
border: solid green
- component: Label
config:
text: Cell C
style:
grid-area: cellC
border: solid yellow
