Hi there,
So I'm trying to make a new layout following the grid model for that I already achieved most of what I wanted by following the methodology below
Layout desired
+----++----++----++----++----++----++----++----++----++----+
|KNOB|| || || || || || || ||BTN ||.. |
+----++----++----++----++----++----++----++----++----++----+
+----++----++----++----++----++----++----++----+
|LED ||... || || || || || || |
+----++----++----++----++----++----++----++----+
+----++----++----++----++----++----++----++----++----++----+
|KNOB|| || || || || || || ||BTN ||.. |
+----++----++----++----++----++----++----++----++----++----+
+----++----++----++----++----++----++----++----+
|LED ||... || || || || || || |
+----++----++----++----++----++----++----++----+
[.....]
For that I have created a "wrapper" (panel/tab) which have the following properties
(...)
"type": "tab",
(...)
"layout": "grid",
"justify": "start",
"gridTemplate": 10,
(...)
So All the document follow that layout, and is working nice
The LED's row would be a panel spanning 8 columns , containing the 8 LED widgets
"css": ":host {\n grid-column: span 8;\n}",
Also the first Knob below each LED panel has to start at column 1, so
"css": ":host {\n grid-column-start: 1;\n}",
So far so good 
Now I'm getting into the complexity of refining this layout altering the relative size of the KNOB columns and led columns , LED columns , LED's have to be way smaller such as
+----++----++----++----++----++----++----++----++----++----+
| || || || || || || || || || |
| || || || || || || || || || |
|KNOB||.. || || || || || || ||BTN ||.. |
| || || || || || || || || || |
| || || || || || || || || || |
| || || || || || || || || || |
+----++----++----++----++----++----++----++----++----++----+
+----++----++----++----++----++----++----++----+
|LED ||... || || || || || || |
+----++----++----++----++----++----++----++----+
+----++----++----++----++----++----++----++----++----++----+
| || || || || || || || || || |
| || || || || || || || || || |
|KNOB||.. || || || || || || ||BTN ||.. |
| || || || || || || || || || |
| || || || || || || || || || |
| || || || || || || || || || |
+----++----++----++----++----++----++----++----++----++----+
+----++----++----++----++----++----++----++----+
|LED ||... || || || || || || |
+----++----++----++----++----++----++----++----+
The issue is that I am a bit confused on how to do this , in normal CSS I would lay the first wrapper in a grid model vertically giving each row a different percentage
.wrapper{
display: grid;
grid-template-rows: 45% 5% 45% 5%;
}
(I would have to redefine a little bit the whole css) , but that would be the first step.
The issue is when issue open-stage-control built in's properties, there doesn't seem to be something like selecting the grid-template-row , instead it looks as if once selected "layout" = "grid" the property gridTemplate int number just acts as grid-template-columns: repeat(int, auto) when I really want to do is alter the grid-template-rows.
Therefore I try to embed some CSS in the wrapper container such as
:host{
display: grid;
grid-template-rows: repeat(10, auto);
}
But it doesn't have quite the same effect
Anyone know what I may be missing ?
Thank you
