How can I adjust height of ever row of a grid in BindableLayout to fit the content's height?

I'm working on a cross platform app on both iOS and Android.
Now I want to display some searched result in a big grid, every cell can be clicked. There should be 3 results in every row, and every cell in a same row should has a same height with a shadow frame. Every result may have a different height.

Here is a image demonstrated what I want (just like Excel):
Just like excel

Firstly, I tried to use a BindableLayout Grid, which has an indexed item list. Every item has a Row and a Col property to fill into a cell. But the Grid's height is different. Here is the xaml.

<ContentPage.BindingContext>
    <mvvm:GridViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
    <StackLayout Margin="5,50,5,0" >
        <Label Text="Result:" />
        <ScrollView x:Name="scrollViewResult" VerticalOptions="StartAndExpand">
            <Grid BindableLayout.ItemsSource="{Binding GridResult}" ColumnDefinitions="*,*,*" RowDefinitions="Auto" VerticalOptions="StartAndExpand">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <!-- Every cell is a nested Grid. Using grid is for the purpose of button.-->
                        <Grid x:Name="NestedGrid" Grid.Row="{Binding Row}" Grid.Column="{Binding Col}" RowDefinitions="Auto" ColumnDefinitions="*" >
                            <!-- Frame for the corner radius and shadow.-->
                            <Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="1">
                                <!-- Label text is real display text.-->
                                <Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="StartAndExpand" HorizontalTextAlignment="Center"/>
                            </Frame>
                            <!-- Here placing a hole-cell button for a better click gesture. -->
                            <Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5"/>
                        </Grid>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </Grid>
        </ScrollView>
    </StackLayout>
</ContentPage.Content> 

It likes below. emmmmm, not good (a BindableLayout Grid):
A BindableLayout Grid

Then, I tried to use nested BindableLayout Grid(only one row) in a BindableLayout StackLayout. Every item in StackLayout is a list, every item in the list has a Col property to fill into a cell. Act a little better but not enough, for some short text will still hold large blank, and some has different height in a row.

<ContentPage.BindingContext>
    <mvvm:GridInGridViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
    <StackLayout Margin="5,50,5,0" >
        <Label Text="Result:" />
        <ScrollView x:Name="scrollViewResult" VerticalOptions="FillAndExpand">
            <StackLayout BindableLayout.ItemsSource="{Binding GridResult}">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <!-- Every Grid has one row and 3 columns.-->
                        <Grid x:Name="ARowGrid" Margin="5,5,5,0" ColumnSpacing="5" RowSpacing="15" RowDefinitions="Auto" ColumnDefinitions="30*,30*,30*" BindableLayout.ItemsSource="{Binding Items}">
                            <BindableLayout.ItemTemplate>
                                <DataTemplate>
                                    <!-- Every cell in ARowGrid is a nested Grid. Using grid is for the purpose of button.-->
                                    <Grid x:Name="NestedGrid" Grid.Row="0" Grid.Column="{Binding Col}" RowDefinitions="Auto" ColumnDefinitions="*" >
                                        <!-- Frame for the corner radius and shadow.-->
                                        <Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="0">
                                            <!-- Label text is real display text.-->
                                            <Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="Start" HorizontalTextAlignment="Center"/>
                                        </Frame>
                                        <!-- Here placing a hole-cell button for a better click gesture. -->
                                        <Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5"/>
                                    </Grid>
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                        </Grid>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>
        </ScrollView>
    </StackLayout>
</ContentPage.Content>

It acts like this (a BindableLayout Grid in BindableLayout StackLayout):
A BindableLayout Grid in BindableLayout StackLayout

So is there any way to adjust height of ever row of a grid to fit the content's height, with every cell in a row has the same height, the height is the max height of content(may be add some margin).

Added 1.======================

I tried the collection view. It not works well too. The Xamarin as follows.

<ContentPage.BindingContext>
    <mvvm:GridViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
    <StackLayout Margin="5,50,5,0" >
        <Label Text="Result:" />
        <ScrollView x:Name="scrollViewResult" VerticalOptions="StartAndExpand">
            <CollectionView ItemsSource="{Binding GridResult}" VerticalOptions="StartAndExpand">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical"
                                     Span="3"
                                     VerticalItemSpacing="5"
                                     HorizontalItemSpacing="5" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <!-- Every cell is a nested Grid. Using grid is for the purpose of button.-->
                        <Grid x:Name="NestedGrid" RowDefinitions="Auto" ColumnDefinitions="*" VerticalOptions="Start">
                            <!-- Frame for the corner radius and shadow.-->
                            <Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="1">
                                <!-- Label text is real display text.-->
                                <Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="StartAndExpand" HorizontalTextAlignment="Center"/>
                            </Frame>
                            <!-- Here placing a hole-cell button for a better click gesture. -->
                            <Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5"/>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </ScrollView>
    </StackLayout>
</ContentPage.Content>

Here is the result. Emm, not well. CollectionView result

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum