The default height and width for Grid rows and columns is *. What does * mean? When a row or column’s height or with is set to *, it occupies all the remaining space. The “remaining space” is the height or width of the grid minus any rows or columns that use absolute sizing or autosizing. This star sizing is sometimes called proportional sizing.

What is absolute sizing? Programmers use absolute sizing when they set the Height or Width to a numeric value representing pixels. When the size of the Grid or the size of the elements changes, the size of the row or column does not change.

Setting the Height or Width to Auto gives the child elements the space they need to display their content and no more. If there are multiple elements in a cell, the tallest and widest ones dictate the size of the cell.

Proportional Sizing and Absolute Sizing

Proportional sizing uses star syntax. Here is a screenshot of a Grid that contains 3 Grids. The outer grid is three rows and one column. The inner grids are each one row and four columns.

The blue cell on the right-hand side has a width of 100 pixels in each case. It is always 100 pixels wide even if the user stretches the entire program window to make it wider. Note that the default is Width=”*”, so it is not necessary to specify this in our Column Definitions. In the code below I have specified it some case and not others only for illustration. When multiple rows use proportional spacing, the remaining space is divided equally.

Rows and columns can place a coefficient in front of the asterisk to take proportionally more space than the other columns. A column with 2* always takes up twice as much space as a column with * in the same grid.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <!-- First grid ********************************************** -->
    <Grid Grid.Row="0">
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!-- Width="*" is the default -->
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>

        <Rectangle Fill="LightPink" Grid.Row="0" Grid.Column="0" />
        <Label HorizontalAlignment="Center" VerticalAlignment="Center" 
            Grid.Row="0" Grid.Column="0">Width=*</Label>

        <Rectangle Fill="LightSalmon" Grid.Row="0" Grid.Column="1"/>
        <Label HorizontalAlignment="Center" VerticalAlignment="Center" 
            Grid.Row="0" Grid.Column="1">Width=*</Label>

        <Rectangle Fill="LightGreen" Grid.Row="0" Grid.Column="2"/>
        <Label HorizontalAlignment="Center" VerticalAlignment="Center" 
            Grid.Row="0" Grid.Column="2">Width=*</Label>

        <Rectangle Fill="LightBlue" Grid.Row="0" Grid.Column="3"/>
        <Label HorizontalAlignment="Center" VerticalAlignment="Center" 
            Grid.Row="0" Grid.Column="3">Width=100</Label>
    </Grid>
    <!-- Second grid ************************************************* -->
    <Grid Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>
        <Rectangle Fill="LightPink" Grid.Row="1" Grid.Column="0" />
        <Label HorizontalAlignment="Center" VerticalAlignment="Center" 
            Grid.Row="1" Grid.Column="0">Width=*</Label>
        <Rectangle Fill="LightSalmon" Grid.Row="1" Grid.Column="1"/>
        <Label HorizontalAlignment="Center" VerticalAlignment="Center" 
            Grid.Row="1" Grid.Column="1">Width=2*</Label>
        <Rectangle Fill="LightGreen" Grid.Row="1" Grid.Column="2"/>
        <Label HorizontalAlignment="Center" VerticalAlignment="Center" 
            Grid.Row="1" Grid.Column="2">Width=*</Label>
        <Rectangle Fill="LightBlue" Grid.Row="1" Grid.Column="3"/>
        <Label HorizontalAlignment="Center" VerticalAlignment="Center" 
            Grid.Row="1" Grid.Column="3">Width=100</Label>
    </Grid>
    <!-- Third grid ************************************************* -->
    <Grid Grid.Row="2">
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="5*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>
        <Rectangle Fill="LightPink" Grid.Column="0" />
        <Label HorizontalAlignment="Center" VerticalAlignment="Center" 
            Grid.Row="1" Grid.Column="0">Width=3*</Label>
        <Rectangle Fill="LightSalmon" Grid.Column="1"/>
        <Label HorizontalAlignment="Center" VerticalAlignment="Center" 
            Grid.Row="1" Grid.Column="1">Width=5*</Label>
        <Rectangle Fill="LightGreen" Grid.Column="2"/>
        <Label HorizontalAlignment="Center" VerticalAlignment="Center" 
            Grid.Row="1" Grid.Column="2">Width=2*</Label>
        <Rectangle Fill="LightBlue" Grid.Column="3"/>
        <Label HorizontalAlignment="Center" VerticalAlignment="Center" 
            Grid.Row="1" Grid.Column="3">Width=100</Label>
    </Grid>
</Grid>