Set horizontally oriented WrapPanel children to have different height

I have a WPF WrapPanel that is oriented horizontally. When I add add children like Grid controls, they all have the same height. How can I make different children to have different height? Is it possible to make it without using any third party software? I have tried to implement WPF Masonry, but it had a lot of errors and I gave up on that one.

For example, if my first Grid has 3 rows and the second one has 6 rows, the first one stretches to the height of the second Grid.

This is what I have right now:

And this is what I am trying to achieve:

EDIT:

My XAML:

<WrapPanel Background="White" Height="200">
    <Grid Style="{StaticResource grdRate}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Border Grid.Row="0" Grid.Column="0" Style="{StaticResource brdRate}">
            <Label Content="Content" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="0" Grid.Column="1" Style="{StaticResource brdRate}">
            <Label Content="1" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="0" Grid.Column="2" Style="{StaticResource brdRate}">
            <Label Content="Content" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="0" Grid.Column="3" Style="{StaticResource brdRate}">
            <Label Content="1" Style="{StaticResource lblRateBold}"></Label>
        </Border>

        <Border Grid.Row="1" Grid.Column="0" Style="{StaticResource brdRate}">
            <Label Content="123" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="1" Grid.Column="1" Style="{StaticResource brdRate}">
            <Label Content="123" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="1" Grid.Column="2" Style="{StaticResource brdRate}">
            <Label Content="123" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="1" Grid.Column="3" Style="{StaticResource brdRate}">
            <Label Content="123" Style="{StaticResource lblRateBold}"></Label>
        </Border>
    </Grid>

    <Grid Style="{StaticResource grdRate}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Border Grid.Row="0" Grid.Column="0" Style="{StaticResource brdRate}">
            <Label Content="name" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="0" Grid.Column="1" Style="{StaticResource brdRate}">
            <Label Content="Details" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="0" Grid.Column="2" Style="{StaticResource brdRate}">
            <Label Content="name" Style="{StaticResource lblRateBold}"></Label>
        </Border>

        <Border Grid.Row="1" Grid.Column="0" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="1" Grid.Column="1" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="1" Grid.Column="2" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>

        <Border Grid.Row="2" Grid.Column="0" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="2" Grid.Column="1" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="2" Grid.Column="2" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>

        <Border Grid.Row="3" Grid.Column="0" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="3" Grid.Column="1" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="3" Grid.Column="2" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>

        <Border Grid.Row="4" Grid.Column="0" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="4" Grid.Column="1" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="4" Grid.Column="2" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
    </Grid>
</WrapPanel>

My styles:

<Style TargetType="Border" x:Key="brdRate">
    <Setter Property="BorderBrush" Value="White"></Setter>
    <Setter Property="BorderThickness" Value="0.5"></Setter>
</Style>

<Style TargetType="Label" x:Key="lblRateBold">
    <Setter Property="FontSize" Value="14"></Setter>
    <Setter Property="FontWeight" Value="Bold"></Setter>
    <Setter Property="HorizontalAlignment" Value="Center"></Setter>
</Style>

<Style TargetType="Label" x:Key="lblRate">
    <Setter Property="FontSize" Value="14"></Setter>
    <Setter Property="HorizontalAlignment" Value="Center"></Setter>
    <Setter Property="Cursor" Value="Hand"></Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#40FF00"></Setter>
        </Trigger>
    </Style.Triggers>
</Style>

<Style TargetType="Grid" x:Key="grdRate">
    <Setter Property="Background" Value="#BDBDBD"></Setter>
    <Setter Property="Margin" Value="5"></Setter>
</Style>

Solution

How can I make different children to have different height?

What about setting the Height property of the Grid elements that you add to the WrapPanel to some different values?

<WrapPanel x:Name="wp">
    <Grid Background="Silver" Height="300" Width="50" />
    <Grid Background="Silver" Height="20"  Width="50" />
    <Grid Background="Silver" Height="150"  Width="50" />
</WrapPanel>

Grid grid = new Grid() { Background = Brushes.Silver, Width = 50, Height = 100 };
wp.Children.Add(grid);

Edit:

You probably also want to set the VerticalAlignment property of the Grid to Top in order for it to not stretch vertically:

<Grid Style="{StaticResource grdRate}" VerticalAlignment="Top">
...