#412 – Three Ways to Set Row Height or Column Width in a Grid

You can set the height/width of rows/columns in a Grid using the Height and Width properties of the RowDefinition and ColumnDefinition elements.  You can specify these values in one of three different ways.

  • Auto – set height/width to fit the size of the contained element
  • numeric value – explicitly set height/width to specified number of device independent units (1/96th in)
  • * or n* – distribute remaining space proportionately across all rows/columns that set their height/width using the * mechanism

Below is an example showing these methods to set the width of four columns in a grid.

    <Grid ShowGridLines="True">
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />

        <!-- Contents of Grid go here -->

The Chico column is set to 100 units wide, Harpo column set to fit content and all remaining space is split up between the Groucho and Zeppo columns.