如何在NativeScript中修复网格布局中的重叠项？

Question

我正在使用NativeScript和Angular创建一款移动测验游戏。我想根据给定的数组（长24个项目）生成3 x 8的网格。

我尝试使用行和列设置如下所示的代码，也尝试将所有代码都设置为“ *”和“ auto”。

<ActionBar title="Riddle #1" icon="" class="action-bar">
</ActionBar>
<StackLayout>
    <Image src="res://some_image"></Image>
    <GridLayout rows="auto, *, auto" columns="auto, *, *, *, *, *, * auto">
            <Label *ngFor="let character of riddleCharacters; let i = index" row="i/8" col="i%8" [text]="character"></Label>
    </GridLayout>
</StackLayout>

不幸的是，所有项目都放置在0,0位置并且彼此重叠。我希望它们形成一个3 x 8的网格。 我很高兴在此问题上提供的帮助。