Nativescript Collapsed GridLayout Row still take place in the UI - nativescript

Question

Using this Layout:
<GridLayout columns="70, *" rows="auto, auto, auto">
<Label row="0" col="0" rowSpan="3" text="A" style="background-color: red;"></Label>
<Label row="0" col="1" text="B" style="background-color: green;"></Label>
<Label row="1" col="1" text="C" visibility="collapse" style="background-color: blue;"></Label>
<Label row="2" col="1" text="D" style="background-color: orange"></Label>
</GridLayout>
Is there a reason I can see a white space between row B and D ? I expected row D to go up and take the place of row C.
I'm testing on a physical device so here's a quick paint of the result:
I expected the result to behave like this html table:
<table>
<tbody>
<tr>
<td rowspan="3" style="width: 70px; background-color: red;">A</td>
<td style="width: 500px; background-color: green;">B</td>
</tr>
<tr>
<td style="display: none; background-color: blue;">C</td>
</tr>
<tr>
<td style="background-color: orange;">D</td>
</tr>
</tbody>
</table>
Here's a snip of the html result:

Answer 1

That is because you have defined a GridLayout with 3 rows and you set the label D to the third row. Even when the label C is collapsed, its place won't be taken up.
If you would like to have a layout exactly as the second picture, then I suggest this:
<GridLayout columns="70, *" rows="auto">
<Label row="0" col="0" text="A" style="background-color: red;"></Label>
<StackLayout row="0" col="1">
<Label text="B" style="background-color: green;"></Label>
<Label text="C" visibility="collapse" style="background-color: blue;"></Label>
<Label text="D" style="background-color: orange"></Label>
</StackLayout>
</GridLayout>
P/s: if you put the label C back to visible, the layout will resize itself also